vue用jspdf 把html转成pdf教程并解决乱码问题

2023-08-23 09:05:05

想用pdf的方式导出网页的内容,以前用的是html2canvas转图片再转pdf,但是这样文字就不能复制了,不怎么好。想这单纯的导成pdf。结果遇到了乱码的问题。又可能html2canvas也有稻城可复制文字的pdf,以后用到研究吧。

    经过实战,我放弃了,可以查看下面步骤的第五条。


  1. 步骤,首先找到自己用的字体 某某ttf,用这个网站转一下https://rawgit.com/MrRio/jsPDF/master/fontconverter/fontconverter.html 或者去github jspdf仓库有html代码,自己转。

  2. 网页也要导入你使用的字体,并且你要导出pdf的文字也必须使用这个中文字体(这是最重要 的否则乱码)

  3. 转完你就明白了,导入转完后的js。

  4. 最简单的使用代码如下

                  

          const doc = new jsPDF();
          doc.setFont("FangZhengHeiTiJianTi-1");
          doc.text("这是题目")
          doc.html(this.$refs.article, {
            callback: function (doc) {
              doc.setFont("FangZhengHeiTiJianTi-1");
              doc.save('12121.pdf')
            }
          });

    这样导出的文字就是中文了。

  5. 但是即使这样,你仍然会出现乱码的情况,这个可能是各种css的原因。 我找到了我的一个原因,我只导出了一个简单的标题,原因是这个标题用到了overflow:hidden属性,就乱码了。不知道什么原理,我导出整个article标签,就更不用说了,样式更多,不可控性可想而知。我也没有再去研究修改。并且你必须保持你的字体和css导入的以及pdf导入的字体完全一样的中文字体才能正常导出,否则乱码,这局限性就有点大了,做固定格式导出的可以用这个。

  • 2021-05-25 13:10:49

    npm 多个不同版本的依赖

    提起 npm,大家第一个想到的应该就是 npm install 了,但是 npm install 之后生成的 node_modules 大家有观察过吗?package-lock.json 文件的作用大家知道吗?除了 dependencies 和 devDependencies,其他的依赖有什么作用呢?接下来,本文将针对 npm 中的你可能忽略的细节和大家分享一些经验 。