如何使用JavaScript Blob对象来实现实时PDF文件的查看或预览功能?

在JavaScript中，Blob对象可以用来处理二进制数据，包括PDF文件。要实现实时PDF文件的查看或预览功能，通常会配合FileReader API或者第三方库如pdf.js。以下是基本步骤：

获取Blob对象：
首先，你需要从服务器获取到PDF内容作为Blob对象。这通常通过fetch请求或者其他网络操作完成。

const url = 'http://example.com/pdf.pdf';
fetch(url)
.then(response => response.blob())
.then(blob => {
// blob就是PDF文件的Blob对象
});
登录后复制

**创建URL for URL.createObjectURL()**：
使用URL.createObjectURL()函数将Blob转换为可以在浏览器中使用的URL，以便于展示。

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

显示预览：
可以直接在这个URL上创建一个<a>标签点击打开，或者使用HTML5的<object>或<iframe>元素展示PDF预览。例如，如果是使用iframe：

<iframe id="preview" srcdoc="<object data='{}'></object>" style="display:none;"></iframe>
登录后复制
然后，在JS中替换srcdoc：
preview.srcdoc = `<object data="${pdfUrl}"></object>`;
preview.style.display = 'block';
登录后复制

清理资源：
当不再需要预览时，记得释放URL：

window.URL.revokeObjectURL(pdfUrl); // 清理blob对应的URL
登录后复制