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

  • 2019-09-03 23:09:17

    Linux下静态库(.a)和动态库(.so) 的生成与使用以及区别

    静态库在程序编译时会被连接到目标代码中,程序运行时将不再需要该静态库。 动态库在程序编译时并不会被连接到目标代码中,而是在程序运行是才被载入,因此在程序运行时还需要动态库存在。

  • 2019-09-03 23:19:12

    ./configure 的配置和用法

    Linux环境下的软件安装,并不是一件容易的事情;如果通过源代码编译后在安装,当然事情就更为复杂一些;现在安装各种软件的教程都非常普遍;但万变不离其中,对基础知识的扎实掌握,安装各种软件的问题就迎刃而解了。Configure脚本配置工具就是基础之一,它是autoconf的工具的基本应用。

  • 2019-09-04 16:24:17

    Ubuntu apt-get更换为阿里源

    ​进入阿里巴巴开源镜像页面,找到ubuntu,点击后面的帮助,可以看到类似下面的介绍,加入就好。切记下面的第三步。

  • 2019-09-04 16:32:56

    Ubuntu tar 解压缩命令详解

    tar 解压缩命令详解,这五个是独立的命令,压缩解压都要用到其中一个,可以和别的命令连用但只能用其中一个。下面的参数是根据需要在压缩或解压档案时可选的。