vue页面导出pdf,vue页面生成PDF或者word
本文主要为你介绍三种将HTML页面转换成PDF并下载的方法。本文中的样例代码讲解的很详细，感兴趣的朋友可以学习一下。
目录
前言方案一问题解决方案二使用问题及解决方案三(推荐)总结
前言
最近公司提出了一个新的要求，希望前端能够按照UI设计绘制体育报道界面，完成数据展示，包括图标展示，并且能够将HTML页面转换成PDF并下载。基于公司的需求，我们查询了很多资料，最终选定了三个技术方案，并完成了演示。当然，三种方案各有利弊，还是需要老板根据效果来选择最终的实施方案。
方案一
Window.print浏览器打印是一个很成熟的东西。直接调用window.print或document.execCommand(print )来达到打印保存的效果。Mac logo键加P直接调用查看效果，windows可以用ctrl p查看效果。
问题
风格的调整隐藏了一些页面无关的内容。A4纸界面的改造
解决方案
1.媒介查询
p {
字体大小：12px
}
@媒体印刷{
p {
字体大小：14px
}
}
//隐藏部分内容
@媒体印刷{
跨度{
显示：无
}
}
2.替换body内容
根据id，获取要打印的innderHTML中的节点，替换正文内容，打印，打印后恢复正文内容。
身体
Type= button value=打印此页 onclick=printpage()/
Div id=printContent 打印内容/div
脚本
函数printpage() {
let newstr=document . getelementbyid( print content )。innerHTML
let oldstr=document . body . innerhtml；
document . body . innerhtml=newstr；
window.print()。
document . body . innerhtml=oldstr；
返回false
}
/脚本
/body
3.打印事件监听
通过onbeforeprint的预打印事件和onafterprint()的后打印事件隐藏和显示打印的元素。
window . onbeforeprint=function(event){
//隐藏不相关的元素
};
window . onafterprint=function(event){
//显示不相关的元素
};
官方网站地址
使用参考文档
方案二
Html2canvas jspdf，使用Html2canvas会用canvas把页面变成base64图像流，并插入jspdf插件，保存并下载pdf。
使用
1.安装：npm安装-保存htmlcanvas2npm安装-保存jspdf
2.绘制较短页面
创建新的htmlToPdf.js导出文件。
//utils/htmlToPdf.js:导出的页面为Pdf格式。
从“html2Canvas”导入html2canvas
从“jspdf”导入JsPDF
导出默认值{
安装(Vue，选项){
//用于导出pdf的id- div容器；标题-导出文件标题
Vue.prototype.htmlToPdf=(id，title)={
const element=document . getelementbyid(` $ { id } `)
const opts={
Scale: 12，//缩放以提高生成图片的清晰度。
UseCORS: true，//允许加载跨域图片
Allowtain: false，//允许图片跨域，useCORS不能一起使用。
Tainttest: true，//检查每张图片都已加载。
Logging: true //log开关，发布时记得改成false。
}
html2Canvas(元素，选项)。然后((画布)={
console.log(画布)
常量内容宽度=canvas.width
const content height=canvas . height
//One page pdf显示html页面生成的画布高度；
const page height=(content width/592.28)* 841.89
//不生成pdf的html页面高度
设leftHeight=contentHeight
//页面偏移量
让位置=0
//a4纸尺寸[595.28，841.89]，pdf中html页面生成的画布的宽度和高度
const imgWidth=595.28
常数高度=(592.28 /内容宽度)*内容高度
const pageData=canvas . toda taurl( image/JPEG ，1.0)
console.log(页面数据)
//a4纸纵向，一般默认使用；新的JsPDF( landscape )；横向页面
常量PDF=新的JsPDF(， pt ， a4 )
//当内容未超过可移植文档格式文件的扩展名(可移植文档格式的缩写)一页显示的范围，无需分页
if (leftHeight pageHeight) {
//addImage(pageData， JPEG ，左，上，宽度，高度)设置
PDF.addImage(pageData， JPEG ，0，0，imgWidth，imgHeight)
}否则{
//超过一页时，分页打印（每页高度841.89)
while (leftHeight 0) {
PDF.addImage(pageData， JPEG ，0，position，imgWidth，imgHeight)
左高-=页面高度
位置-=841.89
if (leftHeight 0) {
PDF.addPage()
}
}
}
PDF.save(标题。pdf’)
})。接住(错误)={
console.log(打印失败，错误)
})
}
}
}
索引。某视频剪辑软件中使用导出方法
模板
差异
差异
id=pdfDom
测试数据
/div
El-button type= primary round style= background:# 4849 ff @ click= BTN点击导出PDF/el按钮
/div
/模板
脚本
从" jspdf "导入JsPDF
从" html2Canvas "导入html2canvas
已安装(){
//导出可移植文档格式文件的扩展名(可移植文档格式的缩写)
btnClick() {
这个. nextTick(()={
this.htmlToPdf(pdfDom ，个人报告)
})
},
},
/脚本
问题及解决方案
1.页面绘制转码时间过长
可以考虑在页面初始化完成后就对页面进行抓取绘制及转码，将转码数据保存，在点击下载时直接生成可移植文档格式文件的扩展名(可移植文档格式的缩写)并保存。
2.html2canvas能够抓取的页面长度大约为1440，两个A4页面左右，超出不会抓取，需要控制多个节点，循环绘制
绘制多个节点
新建htmlToPdf.js导出文件
从" html2Canvas "导入html2canvas
从" jspdf "导入JsPDF
导出默认值{
安装(Vue，选项){
//id-导出可移植文档格式文件的扩展名(可移植文档格式的缩写)的差异容器；标题-导出文件标题
Vue.prototype.htmlToPdf=(name，title)={
const元素=文档。查询选择器全部(` .${name} `)
让计数=0
常量PDF=新的JsPDF(， pt ， a4 )
const pageArr=[]
const opts={
比例：12,//缩放比例，提高生成图片清晰度
useCORS: true，//允许加载跨域的图片
allowTaint: false，//允许图片跨域，和使用克-奥二氏分级量表二者不可共同使用
tainttest: true，//检测每张图片已经加载完成
日志记录：true //日志开关，发布的时候记得改成错误的
}
for(数组。来自(元素)中的常量索引){
html2Canvas(element[index]，opts).然后（函数（画布){
//a4纸的尺寸[595.28，841.89]，html页面生成的帆布在可移植文档格式文件的扩展名(可移植文档格式的缩写)中图片的宽高
常量内容宽度=画布.宽度
const内容高度=画布。高度
const imgWidth=595.28
常数高度=(592.28 /内容宽度)*内容高度
const pageData=canvas。toda taurl(图像/JPEG ，1.0)
//一页可移植文档格式文件的扩展名(可移植文档格式的缩写)显示超文本标记语言页面生成的帆布高度；
常量页面高度=(内容宽度/592.28)* 841.89
//未生成可移植文档格式文件的扩展名(可移植文档格式的缩写)的超文本标记语言页面高度
常量左高=内容高度
pageArr[index]={ pageData:pageData，pageHeight: pageHeight，leftHeight: leftHeight，imgWidth: imgWidth，imgHeight: imgHeight }
if ( count===element.length) {
//转换完毕，可进行下一步处理pageDataArr
让计数=0
for(pageArr的常量数据){
//页面偏移
让位置=0
//转换完毕，保存保存名称后浏览器会自动下载
//当内容未超过可移植文档格式文件的扩展名(可移植文档格式的缩写)一页显示的范围，无需分页
如果(数据。左高数据。页面高度){
//addImage(pageData， JPEG ，左，上，宽度，高度)设置
PDF.addImage(data.pageData， JPEG ，0，0，data.imgWidth，data.imgHeight)
}否则{
//超过一页时，分页打印（每页高度841.89)
while (data.leftHeight 0) {
PDF.addImage(data.pageData， JPEG ，0，position，data.imgWidth，data.imgHeight)
数据。左高-=数据。页面高度
位置-=841.89
if (data.leftHeight 0) {
PDF.addPage()
}
}
}
if ( counts===pageArr.length) {
PDF.save(标题。pdf’)
}否则{
//未转换到最后一页时，pdf增加一页
PDF.addPage()
}
}
}
})
}
}
}
}
索引。某视频剪辑软件中使用导出方法
模板
差异
差异
class=pdfDom
测试数据
/div
差异
class=pdfDom
测试数据2
/div
差异
class=pdfDom
测试数据3
/div
El-button type= primary round style= background:# 4849 ff @ click= BTN点击导出PDF/el按钮
/div
/模板
脚本
从" jspdf "导入JsPDF
从" html2Canvas "导入html2canvas
已安装(){
//导出可移植文档格式文件的扩展名(可移植文档格式的缩写)
btnClick() {
这个. nextTick(()={
this.htmlToPdf(pdfDom ，个人报告)
})
},
},
/脚本
html2canvas
jspdf
实现效果
方案三（推荐）
木偶师（中文翻译"操纵木偶的人") 是谷歌浏览器团队官方的无界面（无头)铬合金工具，它是一个结节库，提供了一个高级的应用程序接口来控制开发者工具协议上的无头版铬合金。也可以配置为使用完整（非无头)的铬合金。
Puppeteer 能做些什么
生成页面的截图和便携文档格式格式。抓取矿泉并生成预先呈现的内容（即“SSR”)。从网站抓取你需要的内容。自动表单提交，用户界面测试，键盘输入等创建一个最新的自动化测试环境。使用最新的Java脚本语言和浏览器功能，直接在最新版本的铬中运行测试。捕获您的网站的时间线跟踪，以帮助诊断性能问题。我们只需关注并使用生成页面的截图便携文档格式功能
Puppeteer的使用
使用表达框架搭建简单的结节服务
安装：
国家预防机制一木偶师或加纱木偶师
1.单个页面生成
var express=require( express )；
var app=express()；
//路由中间件：获取请求/资源
app.get(/)，function (req，res) {
res.send(Hello11 World！);
});
app.listen(3000，function () {
console.log(示例应用程序侦听端口3000!);
});
常数木偶师=要求(木偶师);
const fs=require( fs )；
(async ()={
//指定存放可移植文档格式文件的扩展名(可移植文档格式的缩写)的文件夹
const folder=vueDoc
fs.mkdir(文件夹，()={ console.log(文件夹创建成功) })
//启动无头浏览器
等待傀儡eer。启动({ headless:true })//PDF生成仅在无界面模式支持，调试完记得设为真实的
const page=await浏览器。新页面()；
等待页面。转到( https://cn。vue js。org/v2/guide/indexhtml’)；//默认会等待页面负荷事件触发
//指定生成的可移植文档格式文件的扩展名(可移植文档格式的缩写)文件存放路径
await page.pdf({ path:` ./vue文档/指南。pdf ` })；
//关闭页面
page.close()
//关闭铬
浏览器。close()；
})()
2.根据页面侧边栏循环生成多个页面
var express=require( express )；
var app=express()；
//路由中间件：获取请求/资源
app.get(/)，function (req，res) {
res.send(Hello11 World！);
});
app.listen(3000，function () {
console.log(示例应用程序侦听端口3000!);
});
常数木偶师=要求(木偶师);
const fs=require( fs )；
(async ()={
//指定存放可移植文档格式文件的扩展名(可移植文档格式的缩写)的文件夹
const folder=vueDoc
fs.mkdir(文件夹，()={ console.log(文件夹创建成功) })
//启动无头浏览器
等待傀儡eer。启动({ headless:true })//PDF生成仅在无界面模式支持，调试完记得设为真实的
const page=await浏览器。新页面()；
等待页面。转到( https://cn。vue js。org/v2/guide/indexhtml’)；//默认会等待页面负荷事件触发
//1) 已知某视频剪辑软件文档左侧菜单结构为：菜单-鲁特莉亚
//获取所有一级链接
const URLs=await page。评估(()={
返回新承诺(resolve={
常量阳极=$(。菜单-root lia’)
const URLs=anoders . map(n={
返回阳极[n]。超链接
})
解析(urls
})
})
//2)遍历URL，逐个访问并生成pdf。
设成功URL=[]，失败URL=[]//用于统计成功和失败。
for(设i=17i urls.lengthi ) {
const url=urls[i]，
tmp=url.split(/)，
fileName=tmp[tmp.length - 1]。拆分(.)[0]
尝试{
await page . goto(URL)；//默认情况下，它会等待页面加载事件触发。
await page.pdf({ path:`。/$ { folder }/$ { I } _ $ { fileName } . pdf `})；//指定生成的pdf文件的存储路径
Console.log(`${fileName})。pdf已经生成！`)
successUrls.push(url)
}接住{
//如果页面打开并超时，将会引发错误。为了保证后续页面生成不受影响，这里做一个容错处理。
failUrls.push(url)
Console.log(`${fileName})。pdf生成失败！`)
继续
}
}
Console.log(`PDF生成完成！${successUrls.length}成功，${failUrls.length}失败`)
Console.log(`失败详细信息：$ {failURLs } `)
//TODO:重试失败
page.close()
browser . close()；
})()
如果公司不想用node部署服务，可以用python版本的puppet er或者java版本的puppet er。
Java木偶师
pyppeteer-puppeteer的python版本
实现效果
总结
以上三种方法各有利弊。html2 canvas使用简单方便，但是性能差，用户体验差，需要慢慢调整。最难受的是生成图片，打开慢，卡，不能抄字。在服务器上使用木偶戏其实是目前比较合适的方案，但是需要后端服务支持。
以上是基于Vue将HTML转换为PDF并导出的详细内容。更多关于Vue HTML转换成PDF的信息，请关注我们的其他相关文章！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。