生成PDF中超链接（VueJS版）

背景

需要在导出PDF的时候，不仅仅是导出页面HTML预览页面，而且还需要携带PDF中的超链接。

思路

这里主要使用html2pdf.js来解决PDF中的超链接问题，但是由于html2pdf.js没有支持VueJS，所以，找一个对html2pdf.js的VueJS封装的库：vue-html2pdf。

解决

npm

npm i vue-html2pdf

VueJS

主要用这个库的标签包主要需要导出pdf的html页面标签就可以了：

<vue-html2pdf>
	<section>
	...需要导出pdf的html内容
	section>
vue-html2pdf>

对导出PDF影响最大配置是：

:html-to-pdf-options="htmlToPdfOptions"

htmlToPdfOptions

htmlToPdfOptions() {
      return {
        margin: 0,

        filename: "我是pdf.pdf",

        image: {
          type: "jpeg",
          quality: 0.98,
        },

        enableLinks: true,

        html2canvas: {
          scale: 2,
          useCORS: true,
        },

        jsPDF: {
          unit: "in",
          format: 'a4',
          orientation: 'portrait',
        },
      };
    }

下面一行配置：
enableLinks: true,就是启用PDF的超链接。

总结

用库的标签包住需要导出的html标签，然后用html2pdf.js库的enableLinks: true,设置启用http超链接就行了。

源代码

• https://github.com/fxtxz2/hello-world-vue

参考：

• html2pdf.js
• vue-html2pdf