Vue页面生成导出PDF文件

在Vue应用中导出PDF文件，可以使用html2canvas和jspdf库。以下是一个简单的例子：

1. 安装依赖：

npm install html2canvas jspdf

2. Vue组件中使用这些库来导出PDF：

<template>
  <div>
    <button @click="exportPDF">导出PDF</button>
    <div id="content" style="padding: 10px;">
      <!-- 这里是你想要导出的内容 -->
      <h1>Hello, PDF!</h1>
      <p>这是一个PDF文件的示例内容。</p>
    </div>
  </div>
</template>
 
<script>
import html2canvas from 'html2canvas';
import jsPDF from 'jspdf';
 
export default {
  methods: {
    async exportPDF() {
      const content = this.$el.querySelector('#content');
      const canvas = await html2canvas(content);
      const imgData = canvas.toDataURL('image/png');
      const doc = new jsPDF({
        orientation: 'portrait',
        unit: 'px',
        format: 'a4',
      });
      const imgProps= doc.getImageProperties(imgData);
      const pdfWidth = doc.internal.pageSize.getWidth();
      const pdfHeight = (imgProps.height * pdfWidth) / imgProps.width;
      doc.addImage(imgData, 'PNG', 0, 0, pdfWidth, pdfHeight);
      doc.save('export.pdf');
    },
  },
};
</script>

这段代码中，我们定义了一个exportPDF方法，它会在用户点击按钮时被触发。该方法首先使用html2canvas库将页面中的指定元素（这里是id为content的div）转换为canvas图像。然后，它使用jspdf库创建一个PDF文档，并将转换得到的canvas图像以PNG格式添加到PDF文档中。最后，使用doc.save()方法将生成的PDF保存到用户的设备上。