vue3 純前端解碼base64后預覽pdf

要在 Vue3 中前端解码 Base64 并预览 PDF 文件，可以使用以下步骤：

1. 安装 `pdfjs-dist` 和 `base64-js` 依赖：

npm install pdfjs-dist base64-js

2. 在 Vue3 组件中引入依赖：

import pdfjsLib from 'pdfjs-dist'
import Base64 from 'base64-js'

3. 定义一个方法来将 Base64 解码成二进制数据：

decodeBase64(base64) {
  const binary = Base64.atob(base64)
  const array = new Uint8Array(binary.length)
  for (let i = 0; i < binary.length; i++) {
    array[i] = binary.charCodeAt(i)
  }
  return array
}

4. 加载 PDF 文档并渲染：

loadPdf(doc) {
  const loadingTask = pdfjsLib.getDocument({ data: this.decodeBase64(doc) })
  loadingTask.promise.then(pdf => {
    pdf.getPage(1).then(page => {
      const viewport = page.getViewport({ scale: 1.0 })
      const canvas = this.$refs.pdfCanvas
      const context = canvas.getContext('2d')
      canvas.height = viewport.height
      canvas.width = viewport.width
      page.render({ canvasContext: context, viewport: viewport })
    })
  })
}

其中，`doc` 是 Base64 编码的 PDF 文档，`this.$refs.pdfCanvas` 是用于显示 PDF 的 Canvas 元素。

这样，你就可以在 Vue3 中成功解码 Base64 并预览 PDF 文件了。