当前位置： 移动技术网 > IT编程>脚本编程>vue.js > vue中将网页打印成pdf实例代码

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

2017年12月12日  | 移动技术网IT编程  | 我要评论

装修注意事项,花开在眼前 韩磊,长沙网址

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

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

您可能感兴趣的文章:

如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网