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 World</h1>
      <p>这是一个PDF导出示例。</p>
    </div>
  </div>
</template>
 
<script>
import html2canvas from 'html2canvas';
import jsPDF from 'jspdf';
 
export default {
  methods: {
    async exportPDF() {
      const content = this.$refs.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方法，该方法将页面内容转换为canvas，然后转换为图片格式，最后添加到新的PDF文档中并保存。这个方法适用于简单的内容导出，对于复杂的布局可能需要调整。