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); 怎么让文件能够在浏览器里面预览

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

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

const img = document.createElement('img');
img.src = fileURL;
document.body.appendChild(img);
登录后复制

文本文件（如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);
});
登录后复制

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。以下是一个简单的步骤：

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

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

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

const url = URL.createObjectURL(blob);
登录后复制

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

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

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

window.addEventListener('unload', function () {
URL.revokeObjectURL(url);
});
登录后复制