JavaScript 实现html导出为PDF文件
相信各位前端工程狮们在一些报表项目,管理系统项目中都会遇到在这样的需求:申请报、表格、简历等等图文信息有导出为PDF文件。下面是记录我在项目中完成该需求的代码dome,发布出来也是希望对大家有些帮助。1,整体思路将HTML元素打印或导出为PDF文件,无非就是提取元素页面内容,然后转化为图片,将图片保存为PDF文件。2,准备工作将HTML元素转化为图片:html2canvas.js 插件;<s
·
相信各位前端工程狮们在一些报表项目,管理系统项目中都会遇到在这样的需求:申请报、表格、简历等等图文信息有导出为PDF文件。下面是记录我在项目中完成该需求的代码dome,发布出来也是希望对大家有些帮助。
1,整体思路
将HTML元素打印或导出为PDF文件,无非就是提取元素页面内容,然后转化为图片,将图片保存为PDF文件。
2,准备工作
将HTML元素转化为图片:html2canvas.js 插件;
<script src="https://cdn.bootcss.com/html2canvas/0.5.0-beta4/html2canvas.js"></script>
导出为PDF文件:jspdf.js插件:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.0.272/jspdf.debug.js"></script>
3,dome
HTML:
<button id="btn">导出为PDF文件</button>
<div id="pdfDom">
<table>
<th></th>
</table>
<ul id="box"></ul>
</div>
JavaScript:
<script>
let obox = document.getElementById("box")
let opdfdom = $("#pdfDom")
let obtn = document.getElementById("btn")
let lihtml = ''
for(let i = 0; i < 50; i++){
lihtml += "<li>条目"+i+"</li>"
}
obox.innerHTML = lihtml
obtn.onclick = function(){
downLoadPdf(opdfdom)
}
function downLoadPdf(content){
content = content ? content : null;
// 条件判断是否打印
if(!content){
alert("打印失败,请重新操作")
return false
}
// 开始打印
console.log(content)
var contentWidth = content.width();
var contentHeight = content.height();
var canvas = document.createElement("canvas")
canvas.width = contentWidth
canvas.height = contentHeight
var context = canvas.getContext("2d");
html2canvas(content,{
allowTaint:true,
scale:2 // 提升画面质量,但是会增加文件大小
}).then(function(canvas){
var pdfWidth = canvas.width;
var pdfHeight = canvas.height;
var pageHeight = pdfWidth / 592.28 * 841.89;
var leftHeight = pdfHeight;
var position = 0;
var imgWidth = 595.28;
var imgHeight = 595.28 / pdfWidth * pdfHeight;
var pageData = canvas.toDataURL("img/jpeg",1.0);
var pdf = new jsPDF('', 'pt', 'a4');
// 判断打印dom高度是否需要分页,如果需要进行分页处理
if(leftHeight < pageHeight){
pdf.addImage(pageData,"JPEG",0,0,imgWidth,imgHeight)
}else{
while(leftHeight > 0){
pdf.addImage(pageData,"JPEG",0,position,imgWidth,imgHeight)
leftHeight -= pageHeight
position -= 841.89
if(leftHeight > 0){
pdf.addPage()
}
}
}
pdf.save("案例.pdf")
})
}
</script>
4,结果
完了,没有了。
我也是拾人牙慧,不过这个还是有记录下来的价值的,以后遇到直接Ctrl+C Ctrl+V,啧啧啧,它不香吗?
香啊~~~
拜了个拜!迪迦。。。
更多推荐
已为社区贡献1条内容
所有评论(0)