生成PDF中超链接（VueJS版）

背景

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

思路

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

解决

npm

npm i vue-html2pdf

VueJS

<template>
  <div class="home">
    <vue-html2pdf
        :show-layout=showLayout
        :float-layout="true"
        :enable-download="true"
        :preview-modal="true"
        :paginate-elements-by-height="1400"
        filename="我是pdf"
        :pdf-quality="2"
        :manual-pagination="false"
        pdf-format="a4"
        pdf-orientation="landscape"
        pdf-content-width="800px"
        :html-to-pdf-options="htmlToPdfOptions"

        @progress="onProgress($event)"
        @hasStartedGeneration="hasStartedGeneration()"
        @hasGenerated="hasGenerated($event)"
        ref="html2Pdf"
    >
      <section slot="pdf-content">
        <img alt="Vue logo" src="../assets/logo.png">
        <PdfPrint msg="Welcome to Your Vue.js App"/>
        <a href="https://www.baidu.com">https://www.baidu.com</a>
      </section>
    </vue-html2pdf>
    <div class="display-flex control-container">
      <div>
        <button v-on:click="show">Switch</button>
      </div>
      <div>
        <button v-on:click="generateReport">Get PDF</button>
      </div>
    </div>
  </div>
</template>

<script>
// @ is an alias to /src
import PdfPrint from '@/components/PdfPrint.vue'
import VueHtml2pdf from 'vue-html2pdf'

export default {
  name: 'Pdf',
  data() {
    return {
      name: 'Vue.js',
      showLayout: true
    }
  },
  computed: {
    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',
        },
      };
    },
  },
  methods: {
    show: function(){
      this.showLayout = !this.showLayout
    },
    greet: function (event) {
      // `this` inside methods points to the Vue instance
      alert('Hello ' + this.name + '!')
      // `event` is the native DOM event
      if (event) {
        alert(event.target.tagName)
      }
    },
    generateReport () {
      this.$refs.html2Pdf.generatePdf()
    }
  },
  components: {
    PdfPrint,
    VueHtml2pdf
  }
}
</script>
<style scoped>
.control-container {
  position: fixed;
  z-index: 999999;
}
.display-flex {
  display: flex;
}
</style>

主要用这个库的标签包主要需要导出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