前因

接了個(gè)純前端開(kāi)發(fā)需求：做一個(gè)表單填寫(xiě)網(wǎng)站，用戶填完信息后，直接根據(jù)表單內(nèi)容在線生成 PDF 并下載。

我：這還不簡(jiǎn)單？拿到所有數(shù)據(jù)畫(huà)出html直接html2pdf轉(zhuǎn)一下不就完了，接！

結(jié)果需求一細(xì)化直接傻眼：客戶只要一個(gè)下載按鈕，不想看到預(yù)覽頁(yè)面，再看pdf模版文件——帶圖片、帶表單和大段文本，整整70-80頁(yè)。

我：- -??！

沒(méi)辦法活兒都接了，硬著頭皮干唄，調(diào)研一下只有jspdf符合我現(xiàn)有需求，既然有圖片，session肯定不夠存了，上indexDB把。最終使用RuoYi-Vue3 + jspdf + jspdf-autotable + dexie。

廢話不多說(shuō)，直接復(fù)盤 jsPDF 實(shí)戰(zhàn)中踩過(guò)的三大核心坑，全是干貨！：

1. 第一個(gè)就是字體

PDF強(qiáng)制要求使用思源黑體，但是給我的字體都是OTF格式，直接使用官方工具轉(zhuǎn)后無(wú)法讀取。

需要的自己打開(kāi)
https://rawgit.com/MrRio/jsPDF/master/fontconverter/fontconverter.html  

官方倉(cāng)庫(kù)也沒(méi)有現(xiàn)成的relugar和bold版本的TTF字體，翻找歷史Tag才找到可用字體。 更坑的是： 轉(zhuǎn)換后兩個(gè)字體80MB，加上網(wǎng)頁(yè)本身思源黑體，字體文件包破100MB了。 - -?。?！
后來(lái)找了一些字體精簡(jiǎn)包終于壓縮到20MB！

2. 文字換行的坑

一開(kāi)始都是使用jspdf使用splitTextToSize計(jì)算文字行數(shù)，一開(kāi)始還好后期文本出現(xiàn)了很多英文和特殊符號(hào)后就遇到了問(wèn)題：換行變得莫名奇妙。反復(fù)檢查代碼都沒(méi)發(fā)現(xiàn)問(wèn)題，直到我打印了splitTextToSize渲染日志，才發(fā)現(xiàn)是他這個(gè)罪魁禍?zhǔn)?/strong>，查遍文檔也沒(méi)有找到解決方案。
怎么辦？只能自己干：

// 逐字遍歷
    for (const char of para) {
      const w = getCharWidth(char)
      // 首行要扣掉縮進(jìn)寬度
      let availableWidth
      if (isFirstLine) {
        // 首行：原寬度-縮進(jìn)
        availableWidth = maxLineWidth - firstIndentWidth
      } else {
        // 非首行：有maxWidth就用maxWidth，沒(méi)有沿用maxLineWidth
        availableWidth = secondWidth > 0 ? secondWidth : maxLineWidth
      }
      // 能放下 → 加字
      if (currentWidth + w <= availableWidth) {
        currentLine += char
        currentWidth += w
      }
      // 放不下 → 換行
      else {
        if (currentLine) {
          lines.push(currentLine)
        }
        currentLine = char
        currentWidth = w
        isFirstLine = false
      }
    }