vue 项目中实现pdf预览 pdf打印 pdf下载

在Vue项目中实现PDF预览、打印和下载可以通过以下步骤来实现：

1. 安装pdf.js
   • pdf.js是一个JavaScript库，可以用于在Web上渲染PDF文件。
   • 可以使用npm安装pdf.js，命令如下：npm install pdfjs-dist --save
2. 创建一个PDF组件
   • 在Vue项目中，可以创建一个PDF组件，用于显示PDF文件。
   • 可以使用pdf.js提供的API来渲染PDF文件。
   • 在组件的模板中添加一个canvas元素，用于显示PDF页面。

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

• 在组件的脚本中，通过pdf.js加载PDF文件，并将其渲染到canvas元素中。

<script>
  import pdfjsLib from 'pdfjs-dist'

  export default {
    name: 'PdfViewer',
    props: {
      url: {
        type: String,
        required: true
      }
    },
    mounted () {
      pdfjsLib.getDocument(this.url).promise.then(pdf => {
        pdf.getPage(1).then(page => {
          const canvas = this.$refs.pdfCanvas
          const context = canvas.getContext('2d')
          const viewport = page.getViewport({ scale: 1 })

          canvas.height = viewport.height
          canvas.width = viewport.width

          page.render({
            canvasContext: context,
            viewport: viewport
          })
        })
      })
    }
  }
</script>

   3. 实现PDF打印      

        1.在PDF组件中添加一个按钮，用于触发打印操作。

        2.在按钮的点击事件中，调用浏览器的打印功能。

<template>
  <div>
    <canvas ref="pdfCanvas"></canvas>
    <button @click="print">Print</button>
  </div>
</template>

<script>
  import pdfjsLib from 'pdfjs-dist'

  export default {
    name: 'PdfViewer',
    props: {
      url: {
        type: String,
        required: true
      }
    },
    methods: {
      print () {
        const canvas = this.$refs.pdfCanvas
        const url = canvas.toDataURL('image/png')

        const win = window.open()
        win.document.write('<img src="' + url + '">')
        win.print()
        win.close()
      }
    },
    mounted () {
      pdfjsLib.getDocument(this.url).promise.then(pdf => {
        pdf.getPage(1).then(page => {
          const canvas = this.$refs.pdfCanvas
          const context = canvas.getContext('2d')
          const viewport = page.getViewport({ scale: 1 })

          canvas.height = viewport.height
          canvas.width = viewport.width

          page.render({
            canvasContext: context,
            viewport: viewport
          })
        })
      })
    }
  }
</script>

        4. 实现PDF下载

                1.在PDF组件中添加一个按钮，用于触发下载操作

                2. 在按钮的点击事件中，使用pdf.js提供的API将PDF文件转换为Blob对象，并使用 URL.createObjectURL()方法创建一个URL对象，然后将其赋值给一个a元素的href属性，最后触发a元素的点击事件

<template>
  <div>
    <canvas ref="pdfCanvas"></canvas>
    <button @click="print">Print</button>
    <button @click="download">Download</button>
  </div>
</template>

<script>
import pdfjsLib from 'pdfjs-dist'

export default {
  name: 'PdfViewer',
  props: {
    url: {
      type: String,
      required: true
    }
  },
  methods: {
    print () {
      const canvas = this.$refs.pdfCanvas
      const url = canvas.toDataURL('image/png')

      const win = window.open()
      win.document.write('<img src="' + url + '">')
      win.print()
      win.close()
    },
    download () {
      pdfjsLib.getDocument(this.url).promise.then(pdf => {
        pdf.getData().then(data => {
          const blob = new Blob([data], { type: 'application/pdf' })
          const url = URL.createObjectURL(blob)
          const a = document.createElement('a')
          a.href = url
          a.download = 'document.pdf'
        })
      }
      )
    }
  }
}