Vue做pdf文件预览下载,vue页面生成PDF或者word
在前端帖子中，经常需要创建和下载一个可视化图表页面的PDF文件。本文主要介绍Vue前端如何实现PDF创建和下载功能的相关信息。有需要的朋友可以参考一下。
:
目录
1.安装和导入。2.封装和导出pdf文件方法的配置和详细说明(utils/htmlToPdf.js)。相关组件中的应用效果有待优化。总结思路：用html2canvas把HTML页面转换成图片，然后用jspdf把图片的base64生成pdf文件。
1. 安装及引入
//将页面html转换成图片
npm安装html2canvas -保存
//将图片生成为pdf
npm安装jspdf -保存
将定义好的实现方法引入到项目的主文件main.js中并注册。
从“@/utils/htmlToPdf”导入htmlToPdf；
//使用Vue.use()方法会调用tool方法中的install方法。
vue . use(htmlToPdf)；
portal:Vue中Vue.use()的原理及应用
2. 封装导出 pdf 文件方法
配置详解
设pdf=new jsPDF(p ， pt ，[pdfX，pdfY])；
第一个参数：L:水平P:垂直
第二个参数：度量单位( pt ， mm ， cm ， m ， in 或 px )；
第三个参数：可以是以下格式，默认为“a4”。要自定义格式，只需将大小作为一个数字数组传递，例如：[592.28，841.89]；
a0 - a10
b0 - b10
c0 - c10
分升
信
政府信函
合法的
初级法律
分类帐
药片
信用卡
Pdf.addPage()向Pdf文档添加新页面，默认为a4。参数如下：
Pdf.addImage()向Pdf添加图像。参数如下：
删除页面pdf
let target page=pdf . internal . getnumberofpages()；//获取总页面
pdf . delete page(target page)；//删除目标页面
保存pdf文档
pdf . save(` test . pdf `)；
封装导出 pdf 文件方法（utils/htmlToPdf.js）
//导出的页面是PDF格式
从“html2Canvas”导入html2canvas
从“jspdf”导入JsPDF
导出默认值{
安装(Vue，选项){
vue . prototype . get pdf=function(){
//下载一个pdf的时候，如果不在页面顶部，PDF的样式就会不对，所以要回到页面顶部再下载。
let top=document . getelementbyid( pdf DOM )；
如果(顶！=null) {
top . scrollintoview()；
top=null
}
let title=this.exportPDFtitle
html 2 can vas(document . query selector( # pdf DOM )，{
allowTaint:真
}).然后(函数(画布){
//获取画布canvas的宽度和高度
设contentWidth=canvas.width
设contentHeight=canvas.height
//One page pdf显示html页面生成的画布高度；
设page height=content width/841.89 * 592.28；
//不生成pdf的html页面高度
设leftHeight=contentHeight
//页面偏移量
设位置=0；
pdf中HTML页面生成的画布的宽度和高度(本例为：横向a4纸[841.89，592.28]，纵向尺寸需要更改)
设imgWidth=841.89
设img height=841.89/content width * content height；
let pageData=canvas . toda taurl( image/JPEG ，1.0)；
let PDF=new JsPDF(l ， pt ， a4 )；
//需要区分两个高度：一个是html页面的实际高度，一个是生成的pdf页面的高度。
//当内容不超出pdf一页显示的范围时，不需要分页。
if (leftHeight pageHeight) {
PDF.addImage(pageData， JPEG ，0，0，imgWidth，imgHeight)
}否则{
while (leftHeight 0) {
PDF.addImage(pageData， JPEG ，0，position，imgWidth，imgHeight)
left height-=page height；
位置-=592.28；
//避免添加空白页
if (leftHeight 0) {
pdf . add page()；
}
}
}
PDF.save(标题。pdf’)
})
}
}
}
相关组件中应用
模板
div class=wrap
div id= pdf DOM style= padding:10px；
el表
:data=tableData
边界
El-table-column prop= date label= date width= 250 /El-table-column
El-table-column prop= name label= name width= 250 /El-table-column
El-表格列属性=地址标签=地址/El-表格列
/el-table
/div
button type= button style= margin-top:20px；@click=btnClick 导出PDF/button
/div
/模板
脚本
导出默认值{
data() {
返回{
RTEXPPDFTITLE:页面导出PDFTITLE名称，
表格数据：[
{
日期：“2016年5月6日”，
姓名：“王小虎”，
地址：重庆市九龙坡区火炬大道
}, {
日期：“2016年5月7日”，
姓名：“王小虎”，
地址：重庆市九龙坡区火炬大道
},{
日期：“2016年5月3日”，
姓名：“王小虎”，
地址：“上海市普陀区金沙江路1518弄”
}, {
日期：“2016年5月2日”，
姓名：“王小虎”，
地址：“上海市普陀区金沙江路1518弄”
}, {
日期：“2016年5月4日”，
姓名：“王小虎”，
地址：“上海市普陀区金沙江路1518弄”
}, {
日期：“2016年5月1日”，
姓名：“王小虎”，
地址：“上海市普陀区金沙江路1518弄”
}, {
日期：“2016年5月8日”，
姓名：“王小虎”，
地址：“上海市普陀区金沙江路1518弄”
}, {
日期：“2016年5月6日”，
姓名：“王小虎”，
地址：“上海市普陀区金沙江路1518弄”
}, {
日期：“2016年5月6日”，
姓名：“王小虎”，
地址：“上海市普陀区金沙江路1518弄”
}, {
日期：“2016年5月7日”，
姓名：“王小虎”，
地址：“上海市普陀区金沙江路1518弄”
}, {
日期：“2016年5月1日”，
姓名：“王小虎”，
地址：“上海市普陀区金沙江路1518弄”
}, {
日期：“2016年5月8日”，
姓名：“王小虎”，
地址：“上海市普陀区金沙江路1518弄”
}, {
日期：“2016年5月6日”，
姓名：“王小虎”，
地址：“上海市普陀区金沙江路1518弄”
}, {
日期：“2016年5月7日”，
姓名：“王小虎”，
地址：“上海市普陀区金沙江路1518弄”
}, {
日期：“2016年5月6日”，
姓名：“王小虎”，
地址：南京市江宁区将军大道
}, {
日期：“2016年5月7日”，
姓名：“王小虎”，
地址：南京市江宁区将军大道
}, {
日期：“2016年5月4日”，
姓名：“王小虎”，
地址：“上海市普陀区金沙江路1518弄”
}, {
日期：“2016年5月1日”，
姓名：“王小虎”，
地址：“上海市普陀区金沙江路1518弄”
}, {
日期：“2016年5月8日”，
姓名：“王小虎”，
地址：“上海市普陀区金沙江路1518弄”
}, {
日期：“2016年5月6日”，
姓名：“王小虎”，
地址：“上海市普陀区金沙江路1518弄”
}, {
日期：“2016年5月7日”，
姓名：“王小虎”，
地址：“上海市普陀区金沙江路1518弄”
},{
日期：“2016年5月1日”，
姓名：“王小虎”，
地址：“上海市普陀区金沙江路1518弄”
}, {
日期：“2016年5月8日”，
姓名：“王小虎”，
地址：“上海市普陀区金沙江路1518弄”
}, {
日期：“2016年5月6日”，
姓名：“王小虎”，
地址：“上海市普陀区金沙江路1518弄”
}, {
日期：“2016年5月8日”，
姓名：“王小虎”，
地址：“武汉市洪山区文化大道”
}, {
日期：“2016年5月6日”，
姓名：“王小虎”，
地址：“武汉市洪山区文化大道”
}, {
日期：“2016年5月7日”，
姓名：“王小虎”，
地址：“武汉市洪山区文化大道”
}, {
日期：“2016年5月6日”，
姓名：“王小虎”，
地址：南京市江宁区将军大道
}, {
日期：“2016年5月7日”，
姓名：“王小虎”，
地址：“武汉市洪山区文化大道”
},
]
}
},
方法：{
btnClick(){
这个。$ next tick(()={ this . get pdf()；})
},
},
}
/脚本
效果
待优化部分
分页时，页面内容被截断(欢迎留言讨论交流)；
不同的内容，从新的一页开始；思路：计算超出内容，最后一页的高度(设置间距=页面高度-超出高度)。
总结
关于Vue前端如何生成PDF并下载的这篇文章到此为止。关于Vue前端生成PDF和下载内容的更多信息，请搜索我们之前的文章或继续浏览下面的相关文章。希望大家以后能多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。