vue 生成pdf
时间: 2023-07-01 07:20:26 浏览: 59
你可以使用 jsPDF 和 html2canvas 库来生成 PDF 文件。下面是一个简单的 Vue 示例:
1. 安装依赖:
```
npm install jspdf html2canvas --save
```
2. 在组件中导入依赖:
```javascript
import jsPDF from 'jspdf';
import html2canvas from 'html2canvas';
```
3. 添加一个按钮,用于触发生成 PDF:
```html
<template>
<div>
<button @click="generatePDF">生成 PDF</button>
<div ref="pdfContent">Hello, World!</div>
</div>
</template>
```
4. 在组件中添加一个方法,用于生成 PDF:
```javascript
methods: {
generatePDF() {
const pdfContent = this.$refs.pdfContent;
html2canvas(pdfContent).then(canvas => {
const imgData = canvas.toDataURL('image/png');
const pdf = new jsPDF();
pdf.addImage(imgData, 'PNG', 0, 0);
pdf.save('document.pdf');
});
}
}
```
这样,当用户点击“生成 PDF”按钮时,会将组件中的内容生成为 PDF 文件并下载到本地。