在Vue中实现PDF预览和下载

矫情吗；* 2023-09-25 23:33 40阅读 0赞

在Vue中实现PDF预览和下载可以通过引入PDF.js库来实现。PDF.js是一个使用JavaScript编写的开源PDF查看器，可以在Web浏览器中显示PDF文档。

### 步骤 ###

#### 第一步：安装PDF.js ####

可以通过npm安装PDF.js，命令如下：

npm install pdfjs-dist

#### 第二步：引入PDF.js ####

在Vue项目中的main.js文件中引入PDF.js：

import pdfjsLib from 'pdfjs-dist'

#### 第三步：创建Vue组件 ####

创建一个Vue组件，其中包含一个用于显示PDF的canvas元素和两个按钮，一个用于预览，一个用于下载。代码如下：

<template>
      <div>
        <canvas ref="canvas"></canvas>
        <button @click="previewPDF">预览</button>
        <button @click="downloadPDF">下载</button>
      </div>
    </template>
    
    <script>
    import pdfjsLib from 'pdfjs-dist'
    
    export default {
        
      name: 'PDFViewer',
      data() {
        
        return {
        
          pdfDoc: null,
          pageNum: 1,
          pageRendering: false,
          pageNumPending: null,
          canvas: null,
          ctx: null,
          scale: 1.5
        }
      },
      mounted() {
        
        this.canvas = this.$refs.canvas
        this.ctx = this.canvas.getContext('2d')
      },
      methods: {
        
        renderPage(num) {
        
          this.pageRendering = true
          this.pdfDoc.getPage(num).then(page => {
        
            const viewport = page.getViewport({
        scale: this.scale})
            this.canvas.height = viewport.height
            this.canvas.width = viewport.width
    
            const renderContext = {
        
              canvasContext: this.ctx,
              viewport: viewport
            }
    
            const renderTask = page.render(renderContext)
    
            renderTask.promise.then(() => {
        
              this.pageRendering = false
              if (this.pageNumPending !== null) {
        
                this.renderPage(this.pageNumPending)
                this.pageNumPending = null
              }
            })
          })
    
          document.getElementById('page-num').textContent = num
        },
        queueRenderPage(num) {
        
          if (this.pageRendering) {
        
            this.pageNumPending = num
          } else {
        
            this.renderPage(num)
          }
        },
        onPrevPage() {
        
          if (this.pageNum <= 1) {
        
            return
          }
          this.pageNum--
          this.queueRenderPage(this.pageNum)
        },
        onNextPage() {
        
          if (this.pageNum >= this.pdfDoc.numPages) {
        
            return
          }
          this.pageNum++
          this.queueRenderPage(this.pageNum)
        },
        previewPDF() {
        
          const url = '<http://www.africau.edu/images/default/sample.pdf>'
          pdfjsLib.getDocument(url).promise.then(pdfDoc_ => {
        
            this.pdfDoc = pdfDoc_
            document.getElementById('page-count').textContent = this.pdfDoc.numPages
            this.renderPage(this.pageNum)
          })
        },
        downloadPDF() {
        
          const url = '<http://www.africau.edu/images/default/sample.pdf>'
          pdfjsLib.getDocument(url).promise.then(pdfDoc_ => {
        
            const fileName = 'download.pdf'
            const fileData = pdfDoc_.output()
            const blob = new Blob([fileData], {
        type: 'application/pdf'})
            const link = document.createElement('a')
            link.href = window.URL.createObjectURL(blob)
            link.download = fileName
            link.click()
          })
        }
      }
    }
    </script>

#### 第四步：使用Vue组件 ####

在需要使用PDF预览和下载的页面中使用该Vue组件。代码如下：

<template>
      <PDFViewer></PDFViewer>
    </template>
    
    <script>
    import PDFViewer from './PDFViewer'
    
    export default {
        
      components: {
        
        PDFViewer
      }
    }
    </script>

### 代码说明 ###

1.  在PDFViewer组件中，通过引入pdfjsLib，获取PDF文档，使用canvas元素渲染PDF页面，并提供上一页、下一页、预览和下载功能。
2.  在预览PDF时，使用pdfjsLib.getDocument(url)获取PDF文档对象，使用pdfDoc\_.numPages获取PDF文档总页数，使用pdfDoc\_.getPage(num)获取指定页码的页面对象，并调用this.renderPage(num)方法渲染页面。
3.  在下载PDF时，通过pdfDoc\_.output()获取PDF文档数据，使用Blob对象创建二进制数据，使用a元素的download属性实现下载。

### 总结 ###

通过上述步骤，我们可以在Vue中实现PDF预览和下载功能。使用PDF.js可以实现更多的PDF操作，如搜索、缩放等，可以根据具体需求进行扩展。