VUE实现PDF打印页面
VUE实现PDF打印页面的方法
使用html2pdf.js库
html2pdf.js是一个将HTML内容转换为PDF的库，适合在Vue项目中使用。安装依赖：
npm install html2pdf.js在Vue组件中引入并使用：
import html2pdf from 'html2pdf.js';
export default {
methods: {
generatePDF() {
const element = document.getElementById('pdf-content');
const opt = {
margin: 10,
filename: 'document.pdf',
image: { type: 'jpeg', quality: 0.98 },
html2canvas: { scale: 2 },
jsPDF: { unit: 'mm', format: 'a4', orientation: 'portrait' }
};
html2pdf().from(element).set(opt).save();
}
}
}使用vue-html-to-paper插件
vue-html-to-paper插件简化了打印HTML内容的过程。安装依赖：
npm install vue-html-to-paper在Vue项目中配置插件：
import VueHtmlToPaper from 'vue-html-to-paper';
Vue.use(VueHtmlToPaper);在组件中使用：
this.$htmlToPaper('pdf-content', {
name: 'document.pdf',
specs: ['fullscreen=yes', 'titlebar=yes'],
styles: ['/path/to/print.css']
});使用PDFKit或jsPDF生成PDF
如果需要动态生成PDF内容，可以使用jsPDF库。安装依赖：
npm install jspdf示例代码：
import jsPDF from 'jspdf';
export default {
methods: {
generatePDF() {
const doc = new jsPDF();
doc.text('Hello world!', 10, 10);
doc.save('document.pdf');
}
}
}使用浏览器原生打印功能
对于简单的打印需求，可以直接调用浏览器打印API：
window.print();为优化打印样式，可在CSS中添加：
@media print {
body * {
visibility: hidden;
}
#pdf-content, #pdf-content * {
visibility: visible;
}
#pdf-content {
position: absolute;
left: 0;
top: 0;
}
}注意事项
- 确保打印内容包含在指定DOM元素内（如id为
pdf-content的div） - 复杂布局可能需要调整html2canvas或jsPDF的配置参数
- 打印样式建议使用专门的CSS媒体查询
- 跨浏览器测试确保兼容性
以上方法可根据项目需求选择，简单打印推荐原生API或vue-html-to-paper，复杂PDF生成推荐html2pdf.js或jsPDF。
