纯JS前端实现PDF从生成到下载的全过程

前因

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

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

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

我：- -！！

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

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

1. 第一个就是字体

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

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

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

2. 文字换行的坑

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

// 逐字遍历
    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碰到的全部问题。大佬们或许早已司空见惯，文章仅做实战复盘、技术交流，有更好的处理思路欢迎一起讨论。

到此这篇关于纯JS前端实现PDF从生成到下载的全过程的文章就介绍到这了,更多相关JS PDF生成到下载内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

最新评论