在Vue.js中生成PDF文件,可以使用html2canvas和jspdf库。
- 安装依赖库
npm install html2canvas jspdf
- 在Vue组件中使用
<template><div><button @click="generatePDF">生成PDF</button></div>
</template><script>
import html2canvas from 'html2canvas';
import jsPDF from 'jspdf';export default {methods: {generatePDF() {const element = document.body; // 或者任何你想转换为PDF的DOM元素html2canvas(element).then((canvas) => {const imgData = canvas.toDataURL('image/png');const pdf = new jsPDF({orientation: 'portrait',unit: 'px',format: 'a4',});const imgProps= pdf.getImageProperties(imgData);const pdfWidth = pdf.internal.pageSize.getWidth();const pdfHeight = (imgProps.height * pdfWidth) / imgProps.width;pdf.addImage(imgData, 'PNG', 0, 0, pdfWidth, pdfHeight);pdf.save('download.pdf'); // 保存的文件名});},},
};
</script>
这段代码中,定义了一个generatePDF方法,当按钮点击时,会将页面内容转换为canvas,然后转换为PDF,并提供下载。需要注意的是,转换的DOM元素可以根据实际需求进行选择。