vue 生成pdf文件,Vue做pdf文件预览下载
公众中经常会出现这样的场景。几页合同、协议等。需要下载，并且它们需要与页面保持一致。下面这篇文章主要介绍在Vue页面上生成PDF的最佳方法。有需要的朋友可以参考一下。
目录
前言安装取决于页面到图片到PDFA4打印适应摘要
前言
最近项目有一个需求，就是把系统的统计数据生成一个分析报告，然后导出为PDF。
有两种方法可以做到这一点。一种方式是直接调用打印，用户可以通过浏览器提供的打印页面手动选择导出PDF。当然这种方式兼容性差，体验不好，显然不是我们想要的效果。
那么第二种方法的实现思路是什么呢？
首先，生成报表页面，即常规页面；
然后把页面转换成图片(使用的组件HTML2canvas
最后将图片导出为PDF (jspdf，使用的组件)。
安装依赖
NP install-保存HTML2画布//页面到图片
m安装js pdf-保存//图像到pdf
页面转图片
创建新的index.vue页面：
模板
div ref=pdf
这是要转换的页面，单击
button @ click= handle export export/按钮完成导出操作。
/div
/模板
脚本
从 @/util/pdf.js//tool方法导入{下载pdf}，导出操作
导出默认值{
名称： pdf ，
data() {
return { }；
},
方法：{
handleExport(){
下载PDF(这个。$refs.pdf)
}
}
};
/脚本
页面很简单，一个段落加一个导出按钮。整页设置了别名(ref="PDF ")，导出时通过别名导出整页。
在按钮单击事件中调用工具方法downloadPDF()，该方法来自工具类pdf.js:
从“html2canvas”导入html 2 can vas；
导出常量下载PDF=page={
html2canvas(第页)。然后(函数(画布){
page.appendChild(画布)；
});
};
也很简单。首先介绍了html2canvas，定义了downloadPDF方法。接受一个参数就是要导出的内容，可以用id或者ref获取。
运行结果：
当我们单击export按钮时，我们向现有页面添加了一行相同的内容。通过元素检查器，可以看到添加的内容实际上是一个画布图像，里面的按钮已经不可操作了。
这样就完成了图像逐页转换的过程。
图片转PDF
首先转换index.vue为了让我们导出的pdf更好看，我们用el-table做了一个表格。其他导出逻辑保持不变：
模板
div ref=pdf
el表
:data=tableData
style=width: 700px
El-表格-列
prop=date
Label=时间
宽度=180
/El-表格-列
El-表格-列
prop=name
Label= name
宽度=180
/El-表格-列
El-表格-列
prop=地址
Label=跟我说话
/El-表格-列
/el-table
Button @click=handleExport 导出/button
/div
/模板
脚本
从 @/util/pdf.js//tool方法导入{下载pdf}，导出操作
导出默认值{
名称： pdf ，
data() {
返回{
表数据：[{
日期：“昨天”，
姓名：刘德华，
地址：你真帅
}, {
日期：“今天”，
姓名：“郭富城”，
地址：你最帅
}, {
日期：“明天”，
姓名：张学友，
地址：‘你是贼又帅’
}, {
日期：“每天”，
名字：“黎明”，
地址：‘我没你帅’
}]
};
},
方法：{
handleExport(){
下载PDF(这个。$refs.pdf)
}
}
};
/脚本
效果图：
然后转换pdf.js，添加pdf转换逻辑。
从“html2canvas”导入html 2 can vas；
从“jsPDF”导入jsPDF；
导出常量下载PDF=page={
html2canvas(第页)。然后(函数(画布){
canvas2PDF(画布)；
});
};
const canvas2PDF=canvas={
设contentWidth=canvas.width
设contentHeight=canvas.height
设imgHeight=contentHeight
设imgWidth=contentWidth
//第一个参数：L:水平P:垂直
//第二个参数：度量单位( pt ， mm ， cm ， m ， in 或 px )
let pdf=new jsPDF(l ， pt )；
pdf.addImage(
canvas.toDataURL(image/jpeg ，1.0)，
JPEG ，
0,
0,
imgWidth，
图片高
);
Pdf.save(导出。pdf’)；
};
canvas2pdf方法创建一个jspdf实例，然后添加上一步生成的图像，最后保存导出的PDF文件。
导出的文件效果：
A4打印适配
因为有些需要生成的页面需要打印在A4纸上，所以不能如上设置pdf生成的宽度和高度。需要根据A4纸的大小比例进行调整(其他打印要求相同，使用相应的纸张比例即可)
然后转换pdf.js
从“html2canvas”导入html 2 can vas；
从“jsPDF”导入jsPDF；
导出常量下载PDF=page={
html2canvas(第页)。然后(函数(画布){
canvas2PDF(画布)；
});
};
const canvas2PDF=canvas={
设contentWidth=canvas.width
设contentHeight=canvas.height
//a4纸尺寸[595.28，841.89]，pdf中html页面生成的画布的宽度和高度
设imgWidth=595.28
设img height=592.28/content width * content height；
//第一个参数：L:水平P:垂直
//第二个参数：度量单位( pt ， mm ， cm ， m ， in 或 px )
let pdf=new jsPDF(p ， pt )；
pdf.addImage(
canvas.toDataURL(image/jpeg ，1.0)，
JPEG ，
0,
0,
imgWidth，
图片高
);
Pdf.save(导出。pdf’)；
};
这里，imgWidth和imgHeight按照A4纸张比例调整后，导出的pdf可以正常比例打印。
总结
这就是这篇关于在Vue页面上生成PDF的文章。更多相关Vue页面生成PDF内容，请搜索我们之前的文章或继续浏览下面的相关文章。希望大家以后能多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。