前端导出pdf功能

实现思路：将html页面生成pdf文件，需首先将页面转换为图片，然后再输出成pdf。

一、先引入html2canvas

npm install html2canvas
复制

二、项目内引入

import html2canvas from 'html2canvas'

复制

三、生成方法

html

<div v-if="detail.type === 'article'" class="popover-item flex" @click="$emit('downPdf')">
    <div>导出PDF</div>
</div>


js

downPdf () {
      let _this = this
      document.documentElement.scrollTop = 0
      let canvas = document.createElement("canvas") // 生成canvas上下文
      let context = canvas.getContext("2d")
      let _articleHtml = document.getElementById('article-content')
      let _w = _articleHtml.clientWidth //获取需要导出pdf区域的宽度和高度
      let _h = _articleHtml.clientHeight 
      let scale = 3   将画布宽&&高放大三倍，提高清晰度
      if(_w >_h){
        _h = _w
      }
      canvas.width = _w * scale
      canvas.height = _h * scale
      context.scale(scale, scale)
      let opts = {
        scale: 1,
        width: _w,//dom 原始宽度
        height: _h,
        canvas: canvas,
        useCORS: true  //允许canvas画布内可以跨域请求外部链接图片, 允许跨域请求。
      }
      // 以上部分都是为了强化清晰度的，放大canvas画布
      html2canvas(_articleHtml, opts).then(canvas => {
        _this.createPdfAll(canvas, scale)
      })
 },

复制

将获取到的图片转为pdf有两种方案，一种是自定义宽高，一种是转为a4大小。

自定义宽高
createPdfAll (canvas, scale) {
      let contentWidth = canvas.width / scale 
      let contentHeight = canvas.height / scale
      let pdf = new jsPDF('', 'pt', [contentWidth, contentHeight])  //自定义宽高
      let pageData = canvas.toDataURL('image/jpeg', 1.0) //转换图片为dataURL
      pdf.addImage(pageData, 'JPEG', 0, 0, contentWidth, contentHeight) //添加图像到页面
      pdf.save(`${this.detail.title}.pdf`)
},

复制

转为A4（有个坑）

createPdfPage (canvas) {
   let contentWidth = canvas.width
   let contentHeight = canvas.height
   let pageHeight = contentWidth / 592.28 * 841.89
   let leftHeight = contentHeight
   // pdf页面向上偏移
   let position = 0
   // a4纸的尺寸[595.28,841.89]，html页面生成的canvas在pdf中图片的宽高
   let imgWidth = 595.28
   let imgHeight = 592.28 / contentWidth * contentHeight
   let pageData = canvas.toDataURL('image/jpeg', 1.0)  //转换图片为dataURL
   let pdf = new jsPDF('', 'pt', 'a4')
   // 有两个高度需要区分，一个是html页面的实际高度，和生成pdf的页面高度(841.89)
   // 当内容未超过pdf一页显示的范围，无需分页
   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.detail.title}.pdf`)
 },


复制

转换成A4纸大小，有个严重的bug：
jspdf 他是不会自己换页的，所以他可能会把字从中间截断了，解决方案有三种：
1、如果内容是固定的，那么你就可以计算好每一页的高度了，A4纸的高度大概是840px，那你就在差不多的高度的时候留出空白，那就不会存在截断的问题
2、如果内容高度是后台返回前端循环出来的，那么内容是不固定的，高度也是不固定的，有三种方式解决

• 找到需要打印的 var element = document.getElementById(“pdfDom”); 然后取到他的 childrenNodes 去循环判断每一个元素距离顶部body的高度是不是整数比，如果正好是整数的时候也就是到了换页的地方，那就直接在这里换页，剩下的换到下一页
• 如果页面的总高度是840，那么到换页的地方是20的倍数，那么把每一行的行高或者说是高度都设置成20的整数倍，那么在换页的时候会是正好的元素的高度结束的位置。
• 由于页面大小是不固定的，而且循环判断明显效率不高，所以建议采用第三种方案，也就是createPdfAll自定义宽高，就不存在分页内容被截取的问题。