用vue写个生成pdf文件的代码

由于Vue是前端框架，不能直接生成PDF文件，需要借助第三方库来实现。以下是使用jsPDF和html2canvas库生成PDF文件的示例代码：

1. 安装依赖库

npm install jspdf html2canvas --save

2. 在Vue组件中引入依赖库

import jsPDF from 'jspdf';
import html2canvas from 'html2canvas';

3. 创建一个生成PDF文件的方法

generatePDF() {
  // 获取需要生成PDF的DOM元素
  const element = document.getElementById('pdfContent');
  
  // 使用html2canvas将DOM元素转换为canvas
  html2canvas(element).then(canvas => {
    // 获取canvas的图片数据
    const imgData = canvas.toDataURL('image/png');
    
    // 创建一个新的PDF实例
    const pdf = new jsPDF();
    
    // 将canvas的图片数据添加到PDF中
    pdf.addImage(imgData, 'PNG', 0, 0, 210, 297);
    
    // 保存PDF文件
    pdf.save('example.pdf');
  });
}

4. 在Vue模板中加入一个按钮，调用生成PDF方法

<template>
  <div>
    <div id="pdfContent">
      <!-- 这里放需要生成PDF的内容 -->
    </div>
    <button @click="generatePDF">生成PDF</button>
  </div>
</template>

注意：以上代码只是一个示例，实际使用时需要根据具体需求进行修改。同时，由于html2canvas库的一些限制，可能无法正确地生成某些复杂的DOM元素，需要根据实际情况进行测试和调整。