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);
});
登录后复制