vue中将网页打印成pdf实例代码

整理文档，搜刮出一个vue中将网页打印成pdf的代码，稍微整理精简一下做下分享。

<template>
<div class="pdf-wrap" id="pdfWrap">
 <button v-on:click="getPdf">点击下载PDF</button>
 <div class="pdf-dom" id="pdfDom"></div>
</div>
</template>
<style lang="scss" scoped>

</style>
<script type="text/ecmascript-6">
 import html2Canvas from '@/components/html2canvas.js'
 import JsPDF from '@/components/jsPdf.debug.js'

 export default {
  methods: {
   getPdf: function () {
    let _this = this
    let pdfDom = document.querySelector('#pdfDom')
    html2Canvas(pdfDom, {
     onrendered: function(canvas) {
      let contentWidth = canvas.width
      let contentHeight = canvas.height
      let pageHeight = contentWidth / 592.28 * 841.89
      let leftHeight = contentHeight
      let position = 0
      let imgWidth = 595.28
      let imgHeight = 592.28 / contentWidth * contentHeight

      let pageData = canvas.toDataURL('image/jpeg', 1.0)

      let PDF = new JsPDF('', 'pt', 'a4')

      if (leftHeight < pageHeight) {
       PDF.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight)
      } else {
       while (leftHeight > 0) {
        PDF.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight)
        leftHeight -= pageHeight
        position -= 841.89
        if (leftHeight > 0) {
         PDF.addPage()
        }
       }
      }
      PDF.save(_this.pdfData.title + '.pdf')
     }
    })
    html2Canvas()
   },
  }
 }
</script>

需要引入

html2canvas.js'

和

jsPdf.debug.js

这两个插件库可轻松百度到。如果eslint验证报错，可在eslintignore中设置不对这两个文件进行验证。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

# vue网页打印成pdf # vue打印成pdf # vue中如何实现pdf文件预览的方法 # vue实现在线预览pdf文件和下载（pdf.js） # vue实现pdf文档在线预览功能 # vue使用pdf.js预览pdf文件的方法 # vue中使用vue-pdf的方法详解 # Vue将页面导出为图片或者PDF # Vue如何将页面导出成PDF文件 # vue通过url方式展示PDF的几种方法 # 这两个 # 可在 # 点击下载 # 报错 # 大家多多 # 文档 # scss # lang # script # scoped # style # PDF # eslintignore # pdfDom # dom # html2canvas # components # jsPdf

返回目录在线咨询

上一篇：C#如何安全地从用户上传的XML文件中读取数据？验证与清理策略
下一篇：广州网站制作公司：专业打造您的在线门户

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

全网整合营销服务商

vue中将网页打印成pdf实例代码

您的项目需求