vue2中 怎么pdf的base64 转成canvas 渲染

在 Vue 2 中将 PDF 的 Base64 字符串转换为 Canvas 渲染，你可以使用 pdf.js 这个库来加载和渲染 PDF。首先，确保你已经安装了 pdf.js，然后你可以通过以下步骤实现：

1. 安装 pdf.js

如果你还没有安装 pdf.js，可以通过 npm 安装：

npm install pdfjs-dist

2. 创建 Vue 组件

以下是一个将 Base64 编码的 PDF 渲染到 Canvas 的简单示例：

PdfViewer.vue

<template>
  <div>
    <canvas ref="pdfCanvas"></canvas>
  </div>
</template>

<script>
import * as pdfjsLib from 'pdfjs-dist';

export default {
  props: {
    base64Pdf: {
      type: String,
      required: true
    }
  },
  mounted() {
    this.renderPdf(this.base64Pdf);
  },
  methods: {
    async renderPdf(base64) {
      // 1. 解码 Base64 字符串并转换为 Uint8Array
      const pdfData = new Uint8Array(atob(base64).split('').map(char => char.charCodeAt(0)));

      // 2. 加载 PDF 文件
      const pdf = await pdfjsLib.getDocument(pdfData).promise;

      // 3. 获取第一页
      const page = await pdf.getPage(1);

      // 4. 获取 canvas 上下文
      const canvas = this.$refs.pdfCanvas;
      const context = canvas.getContext('2d');

      // 5. 设置 canvas 尺寸为页面尺寸
      const viewport = page.getViewport({ scale: 1 });
      canvas.width = viewport.width;
      canvas.height = viewport.height;

      // 6. 渲染 PDF 页面到 canvas
      await page.render({
        canvasContext: context,
        viewport: viewport
      }).promise;
    }
  }
};
</script>

3. 使用组件

在父组件中，传入 Base64 字符串即可：

<template>
  <div>
    <PdfViewer :base64Pdf="pdfBase64" />
  </div>
</template>

<script>
import PdfViewer from './PdfViewer.vue';

export default {
  components: {
    PdfViewer
  },
  data() {
    return {
      pdfBase64: 'your-base64-pdf-string-here'
    };
  }
};
</script>

解释：

1. Base64 解码： 我们首先将 Base64 字符串解码为 Uint8Array，这是 PDF.js 需要的数据格式。
2. 加载 PDF： 使用 pdfjsLib.getDocument() 加载 PDF 文档。
3. 获取页面： 从 PDF 文档中获取第一页面（你可以根据需要修改，支持多页渲染）。
4. Canvas 渲染： 创建一个 Canvas 元素，将页面渲染到 Canvas 上。

4. 注意事项：

• 如果你的 PDF 具有多页，可能需要在 Canvas 上逐页渲染。
• 可以调整 scale 参数来控制页面的缩放比例，例如 scale: 2 会使页面渲染更清晰。

这个方法将 Base64 编码的 PDF 渲染为一个 Canvas 元素，适合在浏览器中展示 PDF 内容。如果你有其他特殊需求（如加载更多页或添加交互功能），可以进一步扩展此代码。