1. 安装html2pdf.js
库
javascript
npm install html2pdf.js
2. 组件中引入html2pdf.js
库
javascript
import html2pdf from 'html2pdf.js'
3. 创建方法来处理HTML转PDF的逻辑
javascript
export default {
methods: {
convertHTMLToPDF() {
const element = document.getElementById('html-content'); // 获取包含HTML内容的元素
const pdf = html2pdf().fromHTML(element, {
margin: 1, // 设置边距(以毫米为单位)
filename: 'example.pdf', // 设置生成的PDF文件名
image: { type: 'jpeg', quality: 0.98 }, // 设置图片质量
html2canvas: { dpi: 192, letterRendering: true }, // 设置canvas渲染选项
jsPDF: { unit: 'in', format: 'letter', orientation: 'portrait' }, // 设置生成的PDF的单位、格式和方向
});
pdf.save(); // 保存生成的PDF文件
},
},
};
4. 触发转换的事件
javascript
<template>
<div>
<button @click="convertHTMLToPDF">转换为PDF</button>
<div id="html-content">
<!-- 这里是你的HTML内容 -->
</div>
</div>
</template>