Vue导出页面为PDF格式的实现思路

通过网上的查阅以后,说一下思路.就是将页面转换成图片格式.然后通过图片的base64码.生成pdf..看了他们的文章,做了如下整理..

说起来很容易,那么具体怎么实现呢?

1 、我们要添加两个模块

第一个.将页面html转换成图片

npm install --save html2canvas 

第二个.将图片生成pdf

npm install jspdf --save

2、定义全局函数..创建一个htmltopdf.js文件在指定位置.我个人习惯放在('src/components/utils/htmltopdf')

// 导出页面为pdf格式
import html2canvas from 'html2canvas'
import jspdf from 'jspdf'
export default{
 install (vue, options) {
 vue.prototype.getpdf = function () {
  var title = this.htmltitle
  html2canvas(document.queryselector('#pdfdom'), {
  allowtaint: true
  }).then(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(title + '.pdf')
  }
  )
 }
 }
}

3、在main.js中使用我们定义的函数文件。

import htmltopdf from '@/components/utils/htmltopdf'
vue.use(htmltopdf)

4、在需要的导出的页面..调用我们的getpdf方法即可.

html

<div class="row" id="pdfdom" style="padding-top: 55px;background-color:#fff;">
 //给自己需要导出的ui部分.定义id为"pdfdom".此部分将就是pdf显示的部分
</div>
<button type="button" class="btn btn-primary"v-on:click="getpdf()">导出pdf</button>

js

export default {
 data () {
  return {
  htmltitle: '页面导出pdf文件名'
  }
 }
 }

总结

以上所述是小编给大家介绍的vue导出页面为pdf格式的实现思路，希望对大家有所帮助