Vue pdf blob 文件流 pdfjs-dist 预览

对于在Vue中使用pdf.js-dist预览blob文件流的问题，你可以按照以下步骤进行操作：

1. 安装pdf.js-dist库：

   npm install pdfjs-dist

2. 在Vue组件中引入pdf.js-dist库：

   import pdfjsLib from 'pdfjs-dist'

3. 创建一个方法来加载并预览blob文件流：

   async loadBlobPdf(blob) {
     const loadingTask = pdfjsLib.getDocument({ data: blob })
     const pdf = await loadingTask.promise
     const pageNumber = 1
     const page = await pdf.getPage(pageNumber)
     const scale = 1.5
     const viewport = page.getViewport({ scale })
     const canvas = this.$refs.pdfCanvas
     const context = canvas.getContext('2d')
     canvas.height = viewport.height
     canvas.width = viewport.width

     const renderContext = {
       canvasContext: context,
       viewport: viewport
     }
     await page.render(renderContext)
   }

4. 在模板中使用canvas元素来显示pdf：

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

5. 调用loadBlobPdf方法并传入blob文件流：

   const response = await fetch('your_blob_file_url')
   const blob = await response.blob()
   this.loadBlobPdf(blob)

以上步骤会将blob文件流加载并在canvas中预览。记得将'your_blob_file_url'替换为实际的blob文件的URL。