欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-04-10 12:16:06
通过网上的查阅以后,说一下思路.就是将页面转换成图片格式.然后通过图片的base64码.生成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格式的实现思路,希望对大家有所帮助