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

  • 2020-01-07 10:14:07

    vue强制刷新组件 销毁和重建

    很多时候,通过重置数据将页面重置时,子组件可以提供重置的方法,或者提供props重置自己的状态。但是相对麻烦,那可以使用强制刷新来实现刷新组件。

  • 2020-01-07 10:17:42

    vue钩子函数beforeRouteUpdate没有反应

    由于会渲染同样的 Foo 组件,因此组件实例会被复用。而这个钩子就会在这个情况下被调用。 可以访问组件实例 `this`

  • 2020-01-08 13:23:24

    vue 中使用eventbus

    为了提高组件的独立性和重用性,父组件会通过props向下传数据给子组件,当子组件又事情要告诉父组件时用通过$emit事件告诉父组件,如此确保每个组件都是独立在相对隔离的环境中运行,可以大幅度提高组件的可维护性

  • 2020-01-08 13:30:30

    vue中eventbus被多次触发(vue中使用eventbus踩过的坑)

    一开始的需求是这样子的,我为了实现两个页面组件之间的数据传递,假设我有页面A,点击页面A上的某一个按钮之后,页面会自动跳转到页面B,同时我希望将页面A上的某一些参数携带过去给页面B。 然后我就想,这不就是不同组件之间的数据传递问题而已吗?直接用bus 巴士事件来传递数据不就行了吗。于是,我就很愉快地进行了。关于vue中的eventbus的使用,我之前在一篇vue中的数据传递中有提到过。

  • 2020-01-08 22:03:07

    修改MAC系统下默认PHP版本

    今天在使用mac时遇到了一个问题,因为需要composer拉取laravel5.6,但是提示我php版本过低,但是我本人使用的是集成环境MAMP,已经切换了php7.2的版本,这个为什么没有生效呢?经检查是因为composer检测得是mac下环境变量生效的php版本

  • 2020-01-08 23:37:08

    laravel通过图片流返回图片

    我用laravel的字母头像生成框架Laravolt\Avatar生成的base64头像,但我想做个通用但,直接返回图片,我还是根据以往但经验 改写header但返回值为图片返回值,结果返回失败,一堆乱吗,不知道为啥。 后来用了laravel自带但返回图片但方法,结果ok。记录下

  • 2020-01-08 23:45:06

    laravel response 对象一些常用功能点

    通常,我们并不只是从路由动作简单返回字符串和数组,大多数情况下,都会返回一个完整的 Illuminate\Http\Response 实例或 视图。