当前位置： 移动技术网 > IT编程>脚本编程>vue.js > Vue导出页面为PDF格式的实现思路

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

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

加州靡情第几季尺度大,老白晓,财会方舟网

通过网上的查阅以后,说一下思路.就是将页面转换成图片格式.然后通过图片的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格式的实现思路，希望对大家有所帮助

您可能感兴趣的文章:

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

相关文章:

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