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-02-11 15:53:08

    node缓存框架memory-cache

    无论是在 desktop, mobile or web哪一方面,Cache都常被我们用来提升程序性能。当处理web应用程序的时候,虽然可以使用当前所有浏览器都支持的响应头来进行客户端缓存,从而提升页面加载效率。但当一个内容非常繁杂的页面需要2s来进行HTML输出的时候,即使启用客户端缓存该页面,服务器仍然需要针对每一个来访用户进行页面渲染。想想一个大型的新闻门户网站首页,难道他们要针对每一个用户一遍又一遍地处理HTML吗?

  • 2021-02-19 16:46:35

    window安装composer

    Composer 是 PHP 的一个依赖管理工具。它允许你申明项目所依赖的代码库,它会在你的项目中为你安装他们。

  • 2021-02-21 22:52:12

    php去除字符串中的HTML标签

    php自带的函数可以去除/删除字符串中的HTML标签/代码。 strip_tags(string,allow):函数剥去 HTML、XML 以及 PHP 的标签。 参数:string,必填,规定要检查的字符串;allow,选填,规定允许存在的标签,这些标签不会被删除。

  • 2021-03-02 16:00:30

    git pull时的filename too long的错误

    这是因为git在windowa下的文件名长度最大是260,(git在Linux下最大支持4096长度的文件名),可以通过输入以下命令解决: