PDF 下载

• 1.PDF 下载

1.PDF 下载

使用 'dom-to-image'，'jspdf'两个插件

import domtoimage from 'dom-to-image'
import * as jsPDF from 'jspdf'


let curLength = 8  //页面数
    domtoimage
      .toJpeg(this.pagehtml, { quality: 0.95 })  //把对应的HTML转换成图片
      .then(function (dataUrl) {
        var pageHeight = 594.88  //一页的高度
        // 总高度
        var leftHeight = pageHeight * curLength
        //  pdf页面偏移
        var position = 0
        //html页面生成的canvas在pdf中图片的宽高（a4纸的尺寸[595.28,841.89]）
        var imgWidth = 841.89
        // PDF总高度
        var imgHeight = 595.28 * curLength
        var pageData = dataUrl
        var pdf = new jsPDF.default({
          orientation: 'landscape',
          unit: 'pt',
          format: [imgWidth, 595.28],
        })
        // 有两个高度需要区分，一个是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 -= 595.28
            if (leftHeight > 0) {
              pdf.addPage()
            }
          }
        }
        pdf.save(`分析报告${moment().format('YYYYMMDD')}.pdf`)
      })


      <div ref={(node) => (this.pagehtml = node)}/>