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

发布于 2019-11-06 作者 风铃 28次 浏览 版块 前端

这篇文章主要为大家详细介绍了vue中将网页打印成pdf实例代码,具有一定的参考价值,可以用来参考一下。

感兴趣的小伙伴,下面一起跟随512笔记的小编两巴掌来看看吧!

整理文档,搜刮出一个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中设置不对这两个文件进行验证。

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

注:关于vue中将网页打印成pdf实例代码的内容就先介绍到这里,更多相关文章的可以留意512笔记的其他信息。

关键词:vue.js

收藏
暂无回复