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导入的字体完全一样的中文字体才能正常导出,否则乱码,这局限性就有点大了,做固定格式导出的可以用这个。

  • 2017-01-21 10:32:29

    Vue-cli proxyTable 解决开发环境的跨域问题

    和后端联调时总是会面对恼人的跨域问题,最近基于Vue开发项目时也遇到了这个问题,两边各自想了一堆办法,查了一堆资料,加了一堆参数,最后还得我把自己的localhost映射成上线时将要使用的域名。

  • 2017-01-21 21:44:29

    详解 ESLint 规则,规范你的代码

    在很久之前就想通过工具来规范自己的代码风格,减少程序出错的概率,如果看过我的 一个前端程序猿的Sublime Text3的自我修养 ,这篇博客的朋友,肯定知道在当时我使用 SublimeLinter-jshint 插件来规范风格,但是实际上一直懒癌发作也没去看它的文档,使用着它默认的规则。不过现在是时候切换到 ESLint 了!

  • 2017-01-23 23:09:16

    使用 CSS3 实现超炫的 Loading(加载)动画效果

     SpinKit 是一套网页动画效果,包含8种基于 CSS3 实现的很炫的加载动画。借助 CSS3 Animation 的强大功能来创建平滑,易于定制的动画。SpinKit 的目标不是提供一个每个浏览器都兼容的解决方案,而是给现代浏览器提供更优的技术实现方案和更佳的使用体验。(为保证最佳的效果,请在 Chrome、Firefox 和 Safari 等现代浏览器中浏览)