后端返回pdf文件流vue前端实现预览

可以在前端使用`pdf.js`库来实现预览PDF文件，具体步骤如下：

1. 安装`pdf.js`库

npm install pdfjs-dist --save

2. 在Vue组件中引入`pdf.js`

import pdfjsLib from 'pdfjs-dist'

3. 创建一个canvas元素用于渲染PDF文件

<canvas ref="pdfViewer"></canvas>

4. 加载PDF文件流并渲染到canvas上

loadPdf(pdfStream) {
  let pdfViewer = this.$refs.pdfViewer
  pdfjsLib.disableWorker = true
  pdfjsLib.getDocument({ data: pdfStream }).promise.then(pdf => {
    pdf.getPage(1).then(page => {
      let viewport = page.getViewport({ scale: 1 })
      let canvas = pdfViewer
      let context = canvas.getContext('2d')
      canvas.height = viewport.height
      canvas.width = viewport.width
      page.render({ canvasContext: context, viewport })
    })
  })
}

其中，`pdfStream`为后端返回的PDF文件流，`pdfjsLib.disableWorker`是为了避免在非Web Worker环境中使用Worker的警告，`pdfjsLib.getDocument`方法用于加载PDF文件，`pdf.getPage`方法用于获取PDF文件的第一页，`page.getViewport`方法用于获取页面的视图大小，最后使用`page.render`方法将页面渲染到canvas上。

5. 调用loadPdf方法加载PDF文件流

this.loadPdf(pdfStream)

这样就可以在Vue前端实现预览PDF文件了。