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')
      })
    }

添加标题等文字描述

添加标题等文字描述出现乱码如下图
vue 引用 jspdf + html2canvas 实现html转pdf,并解决中文字符乱码问题_第1张图片

解决方法:添加中文字库(ttf转js)

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

  1. GitHub克隆代码
    https://github.com/MrRio/jsPDF
    打开fontconverter.html vue 引用 jspdf + html2canvas 实现html转pdf,并解决中文字符乱码问题_第2张图片
    2.转换TTF为JS包
    注意ttf文字包选择小一点的,不然会出现堆栈溢出问题
    eslint: js maximum call stack size exceeded
    vue 引用 jspdf + html2canvas 实现html转pdf,并解决中文字符乱码问题_第3张图片
    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')
      })
    }

这样中文可以正常显示了
vue 引用 jspdf + html2canvas 实现html转pdf,并解决中文字符乱码问题_第4张图片
字体下载资源推荐

你可能感兴趣的:(VUE,nodeJS,ttf)