如何优雅使用 vue-html2pdf 插件生成pdf报表

<template>
  <div>
    <button @click="generatePDF">生成报表</button>
  </div>
</template>
 
<script>
import html2pdf from 'vue-html2pdf';
 
export default {
  methods: {
    generatePDF() {
      const title = '我的PDF报表';
      const content = this.$refs.content; // 假设你有一个包含报表内容的元素
 
      // 使用html2pdf插件生成PDF
      html2pdf(content, {
        margin: 10,
        filename: `${title}.pdf`,
        image: { type: 'jpeg', quality: 0.98 },
        html2canvas: { scale: 2 },
        jsPDF: { unit: 'mm', format: 'a4', orientation: 'portrait' }
      });
    }
  }
};
</script>

这个例子中，我们定义了一个方法generatePDF，当按钮被点击时，该方法会被触发。在该方法中，我们使用了html2pdf函数，并传入了需要转换的内容和配置选项。这个例子演示了如何在Vue组件中引入vue-html2pdf插件并使用它来生成PDF报表。