如何在 Vue 2 组件中正确加载 base64 编码的 PDF 到 iframe 或 embed？-灵析社区

如何在vue2中使用iframe和embed均显示base64转化的pdf文件？由于之前没做过，先做了个小测试 Display PDF PDF File Display // Assuming this is your Base64 encoded string const base64String = "data:application/pdf;base64XXXX" // Create a Blob object const byteCharacters = atob(base64String.split(',')[1]); const byteNumbers = new Array(byteCharacters.length); for (let i = 0; i 以上代码有效 ![image.png](https://wmprod.oss-cn-shanghai.aliyuncs.com/c/user/20240915/3fad40dbb51f844216375b34caf64fe9.png) 再放到vue中却失效了，并且没有报错，且渲染的iframe和embed内的src均可以单独打开(以下代码位于mounted) const base64String = "data:application/pdf;base64,XXXXXX" const byteCharacters = atob(base64String.split(',')[1]); const byteNumbers = new Array(byteCharacters.length); for (let i = 0; i < byteCharacters.length; i++) { byteNumbers[i] = byteCharacters.charCodeAt(i); } const byteArray = new Uint8Array(byteNumbers); const blob = new Blob([byteArray], { type: 'application/pdf' }); this.url = URL.createObjectURL(blob); document.getElementById('pdfViewer').src = this.url; ![image.png](https://wmprod.oss-cn-shanghai.aliyuncs.com/c/user/20240915/d2637376ea437d22933f1866804dd70c.png) ![image.png](https://wmprod.oss-cn-shanghai.aliyuncs.com/c/user/20240915/b285f04afcd72b8ac005f4a1defd714d.png) 也尝试过将iframe的地址改为百度，可以显示请问有人知道这是什么原因吗？

阅读量：135

点赞量：0

问AI

猫界袁隆平

在 Vue 2 中，你可以通过使用 "iframe" 或 "embed" 标签来显示从 Base64 转换而来的 PDF 文件。以下是具体的实现方法： 1. 使用"iframe" 显示 Base64 PDF 文件你可以将 Base64 字符串直接嵌入到 "iframe" 的 "src" 属性中。需要注意的是，Base64 字符串应当包含正确的前缀（如 "data:application/pdf;base64,"），以便浏览器正确解析。 export default { data() { return { // 示例Base64字符串 base64String: 'JVBERi0xLjcKCjEgMCBvYmoKPDwvVHlwZSAvQ2F0YW... (Base64 Data)', }; }, computed: { pdfData() { return `data:application/pdf;base64,${this.base64String}`; } } }; 2. 使用"embed" 显示 Base64 PDF 文件与 "iframe" 类似，"embed" 标签也可以用来嵌入 PDF 文件，同样使用 Base64 字符串作为 "src"。 export default { data() { return { // 示例Base64字符串 base64String: 'JVBERi0xLjcKCjEgMCBvYmoKPDwvVHlwZSAvQ2F0YW... (Base64 Data)', }; }, computed: { pdfData() { return `data:application/pdf;base64,${this.base64String}`; } } }; 3. 注意事项 * Base64 字符串长度：Base64 编码的 PDF 文件可能非常大，这会导致页面加载较慢或者浏览器无法解析整个字符串。确保你的 Base64 字符串不被截断。 * 浏览器支持：大多数现代浏览器都支持这种嵌入方式，但某些旧版浏览器可能会有兼容性问题。 * 安全性：在处理 Base64 数据时，尤其是从外部来源获取的数据，确保它们是安全的，并且不会引发安全问题（如跨站脚本攻击）。以上方法可以帮助你在 Vue 2 中使用 "iframe" 或 "embed" 标签来显示 Base64 转化的 PDF 文件。