纯前端实现pdf从生成到下载

前因

接了个纯前端开发需求：做一个表单填写网站，用户填完信息后，直接根据表单内容在线生成 PDF 并下载。

我：这还不简单？拿到所有数据画出html直接html2pdf转一下不就完了，接！

结果需求一细化直接傻眼：客户只要一个下载按钮，不想看到预览页面，再看pdf模版文件------带图片、带表单和大段文本，整整70-80页。

我：- -！！

没办法活儿都接了，硬着头皮干呗，调研一下只有jspdf符合我现有需求，既然有图片，session肯定不够存了，上indexDB把。最终使用RuoYi-Vue3 + jspdf + jspdf-autotable + dexie。

废话不多说，直接复盘 jsPDF 实战中踩过的三大核心坑，全是干货！：

1. 第一个就是字体

PDF强制要求使用思源黑体，但是给我的字体都是OTF格式，直接使用官方工具转后无法读取。

js 复制代码

需要的自己打开
https://rawgit.com/MrRio/jsPDF/master/fontconverter/fontconverter.html

官方仓库也没有现成的relugar和bold版本的TTF字体，翻找历史Tag才找到可用字体。 更坑的是： 转换后两个字体80MB，加上网页本身思源黑体，字体文件包破100MB了。 - -！！！

后来找了一些字体精简包终于压缩到20MB！

2. 文字换行的坑

一开始都是使用jspdf使用splitTextToSize计算文字行数，一开始还好后期文本出现了很多英文和特殊符号后就遇到了问题：换行变得莫名奇妙 。反复检查代码都没发现问题，直到我打印了splitTextToSize渲染日志，才发现是他这个罪魁祸首 ，查遍文档也没有找到解决方案。

怎么办？只能自己干：

js 复制代码

// 逐字遍历
    for (const char of para) {
      const w = getCharWidth(char)
      // 首行要扣掉缩进宽度
      let availableWidth
      if (isFirstLine) {
        // 首行：原宽度-缩进
        availableWidth = maxLineWidth - firstIndentWidth
      } else {
        // 非首行：有maxWidth就用maxWidth，没有沿用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
      }
    }

3.图片渲染

调用官方APIpdf.addImage，Base64图片、canvas甚至网络图片我都试了，都可以拿到数据，打印方法日志也是正常，但是PDF就是不显示图片，感觉就像PDF没有渲染出来一样也不是空白。我试尽了各种办法始终无果。

直到同时提醒：会不会是一步问题？ 这才恍然大悟------所有情况都考虑了，唯独忽略了图片加载异步的问题。

总结

以上是项目落地jsPDF碰到的全部问题。大佬们或许早已司空见惯，文章仅做实战复盘、技术交流，有更好的处理思路欢迎一起讨论。