问答博客标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

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

头像
体贴的电影票_dvQfmd
    132

    如何在vue2中使用iframe和embed均显示base64转化的pdf文件？

    由于之前没做过，先做了个小测试

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Display PDF</title>
</head>
<body>
    <h1>PDF File Display</h1>
    <embed id="pdfViewer" width="600" height="500" type="application/pdf">

    <script>
        // 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 < byteCharacters.length; i++) {
            byteNumbers[i] = byteCharacters.charCodeAt(i);
        }
        const byteArray = new Uint8Array(byteNumbers);
        const blob = new Blob([byteArray], { type: 'application/pdf' });

        // Create a URL object
        const url = URL.createObjectURL(blob);

        // Set the URL as the source of the embed element
        document.getElementById('pdfViewer').src = url;
    </script>
</body>
</html>

    以上代码有效
    image.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
    image.png
    也尝试过将iframe的地址改为百度，可以显示
    请问有人知道这是什么原因吗？

    vue2base64iframeembed
    阅读 1.2k
    1 个回答
    得票最新
    头像
    Max迪丶先生
      1.8k11324

      在 Vue 2 中，你可以通过使用 iframe 或 embed 标签来显示从 Base64 转换而来的 PDF 文件。以下是具体的实现方法：

      1. 使用 iframe 显示 Base64 PDF 文件

      你可以将 Base64 字符串直接嵌入到 iframe 的 src 属性中。需要注意的是，Base64 字符串应当包含正确的前缀（如 data:application/pdf;base64,），以便浏览器正确解析。

      <template>
  <div>
    <iframe :src="pdfData" width="100%" height="600px"></iframe>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 示例Base64字符串
      base64String: 'JVBERi0xLjcKCjEgMCBvYmoKPDwvVHlwZSAvQ2F0YW... (Base64 Data)',
    };
  },
  computed: {
    pdfData() {
      return `data:application/pdf;base64,${this.base64String}`;
    }
  }
};
</script>

      2. 使用 embed 显示 Base64 PDF 文件

      与 iframe 类似，embed 标签也可以用来嵌入 PDF 文件，同样使用 Base64 字符串作为 src。

      <template>
  <div>
    <embed :src="pdfData" width="100%" height="600px" type="application/pdf" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 示例Base64字符串
      base64String: 'JVBERi0xLjcKCjEgMCBvYmoKPDwvVHlwZSAvQ2F0YW... (Base64 Data)',
    };
  },
  computed: {
    pdfData() {
      return `data:application/pdf;base64,${this.base64String}`;
    }
  }
};
</script>

      3. 注意事项

      • Base64 字符串长度：Base64 编码的 PDF 文件可能非常大，这会导致页面加载较慢或者浏览器无法解析整个字符串。确保你的 Base64 字符串不被截断。
      • 浏览器支持：大多数现代浏览器都支持这种嵌入方式，但某些旧版浏览器可能会有兼容性问题。
      • 安全性：在处理 Base64 数据时，尤其是从外部来源获取的数据，确保它们是安全的，并且不会引发安全问题（如跨站脚本攻击）。

      以上方法可以帮助你在 Vue 2 中使用 iframe 或 embed 标签来显示 Base64 转化的 PDF 文件。

      撰写回答
      你尚未登录，登录后可以
      • 和开发者交流问题的细节
      • 关注并接收问题和回答的更新提醒
      • 参与内容的编辑和改进，让解决方法与时俱进
      推荐问题
      宣传栏