vue 项目中实现pdf预览 pdf打印 pdf下载-Toy模板网

这篇具有很好参考价值的文章主要介绍了vue 项目中实现pdf预览 pdf打印 pdf下载。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

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

安装pdf.js
- pdf.js是一个JavaScript库，可以用于在Web上渲染PDF文件。
- 可以使用npm安装pdf.js，命令如下：npm install pdfjs-dist --save
创建一个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元素的点击事件文章来源地址https://www.toymoban.com/news/detail-547126.html

<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'
        })
      }
      )
    }
  }
}

到了这里，关于vue 项目中实现pdf预览 pdf打印 pdf下载的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！