html2pdf:htm转pdf插件的使用

95 阅读1分钟
<template>
  <div>
    <div ref="content">
      <h1>PDF内容</h1>
      <p>这里是PDF的内容部分。</p>
    </div>
    <button @click="convertToPDF">下载PDF</button>
  </div>
</template>

<script>
import html2pdf from 'html2pdf.js';

export default {
  methods: {
    convertToPDF() {
      const content = this.$refs.content;
      const options = {
        margin: 10,
        filename: 'mypdf.pdf',
        image: { type: 'jpeg', quality: 0.98 },
        html2canvas: { scale: 2 },
        jsPDF: { unit: 'mm', format: 'a4', orientation: 'portrait' }
      };
      // 方式1:
      html2pdf(content, options);
      // 方式2:
      // html2pdf().set(options).from(content).save();
    }
  }
};
</script>