window.URL.createObjectURL(blob) 预览 PDF 设置文件名称

要预览 PDF 并设置文件名称，可以使用如下代码：

const blob = new Blob([pdfData], { type: 'application/pdf' });
const url = window.URL.createObjectURL(blob);
const link = document.createElement('a');
link.href = url;
link.download = 'myPDF.pdf'; // 设置文件名称
link.click();

其中，`pdfData` 是 PDF 文件的二进制数据。通过 `window.URL.createObjectURL()` 可以生成用于预览 PDF 的 URL。然后创建一个 `<a>` 标签，将生成的 URL 赋值给 `href` 属性，并将 `download` 属性设置为要保存的文件名称即可。

相关问题

let fileURL = window.URL.createObjectURL(blob) window.open(fileURL); 怎么让文件能够在浏览器里面预览

要在浏览器中预览文件，你可以使用适当的媒体类型和浏览器支持的预览方法。以下是一些常见的文件类型和相应的预览方法示例：

1. 图片文件（如JPEG、PNG、GIF）：可以直接在浏览器中显示。你可以创建一个`<img>`元素，并将`fileURL`作为其`src`属性值。

const img = document.createElement('img');
img.src = fileURL;
document.body.appendChild(img);

2. 文本文件（如txt、csv、log）：可以将文件内容显示在`<pre>`或`<textarea>`元素中。

fetch(fileURL)
  .then(response => response.text())
  .then(text => {
    const pre = document.createElement('pre');
    pre.textContent = text;
    document.body.appendChild(pre);
  });

3. PDF文件：可以使用PDF.js库来呈现PDF文件。首先，确保在你的HTML文件中引入了PDF.js库，然后使用以下代码：

const pdfViewer = document.createElement('iframe');
pdfViewer.src = `https://mozilla.github.io/pdf.js/web/viewer.html?file=${fileURL}`;
pdfViewer.style.width = '100%';
pdfViewer.style.height = '600px';
document.body.appendChild(pdfViewer);

这些只是一些常见的文件类型的预览方法示例，具体取决于你要预览的文件类型和浏览器支持的功能。请根据你的需求和文件类型选择适当的方法。

js blob实现预览pdf

在JavaScript中，Blob对象通常用于处理二进制数据，如PDF文件。如果你有一个PDF文件作为Blob，并想在浏览器中预览它，你可以利用HTML5的FileReader API。以下是一个简单的步骤：

1. 创建Blob实例：首先获取到PDF内容并将其转换为Blob对象。这通常是通过服务端响应、fetch请求或者其他方式得到的。

const pdfData = ...; // 这里是PDF文件的实际数据，可能是Base64编码或其他形式
const blob = new Blob([pdfData], {type: 'application/pdf'});

2. 创建URL：为了在浏览器中显示，你需要创建一个可读的URL，可以使用URL.createObjectURL()函数。

const url = URL.createObjectURL(blob);

3. 显示预览：然后你可以将这个URL绑定到一个`<a>`标签的href属性，或者创建一个`<embed>`元素来预览PDF。

<a href={url} download="example.pdf">下载或预览PDF</a>
<!-- 或者 -->
<embed src={url} type="application/pdf" width="100%" height="800px">

4. 清理：当用户不再需要这个预览时，记得释放URL资源，避免内存泄漏。

window.addEventListener('unload', function () {
  URL.revokeObjectURL(url);
});