vue 引用 jspdf + html2canvas 实现html转pdf，并解决中文字符乱码问题

html转pdf

HTML指定div #DECoreContainer保存为图片，并导出PDF

PDFexport() {
      var title = '空气质量检测报告'// 文档标题
      html2Canvas(document.querySelector('#DECoreContainer'), {
        dpi: 144, // 导出pdf清晰度
        //    scale: 2,
        allowTaint: true
      }).then(function (canvas) {
        const contentWidth = canvas.width
        const contentHeight = canvas.height
        // 一页pdf显示html页面生成的canvas高度;
        var pageHeight = contentWidth / 592.28 * 841.89
        // 未生成pdf的html页面高度
        var leftHeight = contentHeight
        // pdf页面偏移
        var position = 0
        // html页面生成的canvas在pdf中图片的宽高（a4纸的尺寸[595.28,841.89]）
        const imgWidth = 595.28
        const imgHeight = 592.28 / contentWidth * contentHeight
        const pageData = canvas.toDataURL('image/jpeg', 1.0)
        const PDF = new JsPDF('', 'pt', 'a4')
        PDF.text(35, 25, '空气质量检测报告')
        PDF.setFont('courier')
        // 有两个高度需要区分，一个是html页面的实际高度，和生成pdf的页面高度(841.89)
        // 当内容未超过pdf一页显示的范围，无需分页
        if (leftHeight < pageHeight) {
          PDF.addImage(pageData, 'JPEG', 0, 100, 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')
      })
    }

添加标题等文字描述

添加标题等文字描述出现乱码如下图

解决方法：添加中文字库（ttf转js）

jsPDF 插件对中文支持不够友好，会出现乱码问题。目前比较好的解决办法是，中文部分使用图片替换。还有一种做法是制作一个文字包。
下面制作文字包：

1. GitHub克隆代码
   https://github.com/MrRio/jsPDF
   打开fontconverter.html
   2.转换TTF为JS包
   注意ttf文字包选择小一点的，不然会出现堆栈溢出问题
   eslint: js maximum call stack size exceeded
   
   3.require报错jsPDF undifinded 在模块中添加jspdf引用
   
   4.使用

import html2Canvas from 'html2canvas'
import jsPDF from 'jspdf'
require('../../static/DECore/FZHTJW-normal')

 PDFexport() {
      var title = '空气质量检测报告'// 文档标题
      html2Canvas(document.querySelector('#DECoreContainer'), {
        dpi: 144, // 导出pdf清晰度
        //    scale: 2,
        allowTaint: true
      }).then(function (canvas) {
        const contentWidth = canvas.width
        const contentHeight = canvas.height
        // 一页pdf显示html页面生成的canvas高度;
        var pageHeight = contentWidth / 592.28 * 841.89
        // 未生成pdf的html页面高度
        var leftHeight = contentHeight
        // pdf页面偏移
        var position = 0
        // html页面生成的canvas在pdf中图片的宽高（a4纸的尺寸[595.28,841.89]）
        const imgWidth = 595.28
        const imgHeight = 592.28 / contentWidth * contentHeight
        const pageData = canvas.toDataURL('image/jpeg', 1.0)
        console.log(jsPDF)
        const PDF = new jsPDF('p', 'pt', 'a4')
        PDF.setFont('FZHTJW')
        PDF.text(35, 25, '空气质量检测报告')
        // PDF.setFont('courier')
        // 有两个高度需要区分，一个是html页面的实际高度，和生成pdf的页面高度(841.89)
        // 当内容未超过pdf一页显示的范围，无需分页
        if (leftHeight < pageHeight) {
          PDF.addImage(pageData, 'JPEG', 0, 100, 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')
      })
    }

这样中文可以正常显示了

字体下载资源推荐