在Vue中导出HTML为PDF文件,可以使用html2canvas
和jspdf
库。以下是一个简单的例子:
- 安装依赖:
npm install html2canvas jspdf
- 在Vue组件中使用这些库:
<template>
<div>
<div id="content-to-print" ref="content">
<!-- 这里是你要导出的HTML内容 -->
<h1>Hello World</h1>
<p>这是一个PDF导出示例。</p>
</div>
<button @click="exportPDF">导出PDF</button>
</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
方法,它会在用户点击按钮时被触发。该方法首先使用html2canvas
库将要导出的HTML内容(content-to-print
元素)渲染成一个canvas,然后使用jspdf
库创建一个PDF文档,并将canvas的内容以图片形式添加到PDF中。最后,使用doc.save
方法将PDF保存到用户的设备上。