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

這樣中文可以正常顯示了

字體下載資源推薦