html页面转PDF、图片操作记录
前言
日常开发中，我们有可能会碰到从系统中导出数据并打印的需要，打印的格式是常规的表格形式，例如：
本文记录使用js库html2canvas + jspdf实现html转PDF、图片，并下载
画出页面
对于我们后端开发人员来说，画这样的表格页面还是比较耗时的，我们可以另辟蹊径，在word文档画好表格，并设置好数据，再另存为html页面，这样就得到我们想要的表格页面
新建一个Word文档，画出我们想要的表格格式，其中姓名等信息是程序输入，备注、签名等是打印出来后手写
再另存为HTML文件，查看这个HTML文件的源代码，注意要复制的代码
把代码复制到我们的项目中即可
项目应用
我们是一个vue项目，如何搭建vue项目可以看回我们之前的博客：Vue项目入门实例
首先有个common工具类，封装引入在线js的方法
/**
* common工具类
*/
export default {
//根据url引入js
importJsByUrl(url){
const element = document.createElement("script");
element.src = url;
document.body.appendChild(element);
},
}
简单的页面
<template>
<div>
<el-row style="text-align: center;">
<el-button v-on:click="pdf">转PDF</el-button>
<el-button v-on:click="img">转图片</el-button>
</el-row>
<div style="display: flex;justify-content: center;">
<div class="app-ccontent">
<!-- 我们复制出来的html代码就放在这里 -->
</div>
</div>
</div>
</template> <script>
import CommonUtil from "@/utils/commonUtil.js" export default {
data(){
return{
user:{//模拟数据
name:"huanzi-qch",
age:"2020年11月",
nativePlace:"广西南宁",
nowLiving:"广东广州"
}
}
},
created() {
//引入 html2canvas、jspdf
CommonUtil.importJsByUrl("https://cdn.bootcss.com/html2canvas/0.5.0-alpha2/html2canvas.min.js");
CommonUtil.importJsByUrl("https://cdn.bootcss.com/jspdf/1.5.3/jspdf.min.js");
},
methods:{
//转成PDF并下载
pdf(){ },
//转成图片并下载
img(){ },
}
}
</script> <style scoped>
.app-ccontent{
padding: 20px;
width: 794px;
background-color: #eef1f5;
}
</style>
完整代码，复制过来的html代码，最外层的div新增id属性：id="body" ，方便html2canvas获取元素内容转成canvas画布
<template>
<div>
<el-row style="text-align: center;">
<el-button v-on:click="pdf">转PDF</el-button>
<el-button v-on:click="img">转图片</el-button>
</el-row>
<div style="display: flex;justify-content: center;">
<div class="app-ccontent">
<div class="Section0" id="body" style="layout-grid:15.6000pt;" >
<h2 align=center style="text-align:center;" ><b><span style="mso-spacerun:'yes';font-family:黑体;mso-ascii-font-family:Arial;
mso-hansi-font-family:Arial;mso-bidi-font-family:'Times New Roman';font-weight:bold;
font-size:16.0000pt;mso-font-kerning:1.0000pt;" ><font face="黑体" >导出</font></span></b><b><span style="mso-spacerun:'yes';font-family:黑体;mso-ascii-font-family:Arial;
mso-hansi-font-family:Arial;mso-bidi-font-family:'Times New Roman';font-weight:bold;
font-size:16.0000pt;mso-font-kerning:1.0000pt;" >PDF/<font face="黑体" >图片测试</font></span></b><b><span style="mso-spacerun:'yes';font-family:Arial;mso-fareast-font-family:黑体;
mso-bidi-font-family:'Times New Roman';font-weight:bold;font-size:16.0000pt;
mso-font-kerning:1.0000pt;" ><o:p></o:p></span></b></h2><table class=MsoTableGrid border=1 cellspacing=0 style="border-collapse:collapse;width:99.9600%;border:none;
mso-border-left-alt:0.5000pt solid windowtext;mso-border-top-alt:0.5000pt solid windowtext;mso-border-right-alt:0.5000pt solid windowtext;
mso-border-bottom-alt:0.5000pt solid windowtext;mso-border-insideh:0.5000pt solid windowtext;mso-border-insidev:0.5000pt solid windowtext;
mso-padding-alt:0.0000pt 5.4000pt 0.0000pt 5.4000pt ;" ><tr style="height:23.3500pt;" ><td width=24.9800% valign=top style="width:24.9800%;padding:0.0000pt 5.4000pt 0.0000pt 5.4000pt ;border-left:1.0000pt solid windowtext;
mso-border-left-alt:0.5000pt solid windowtext;border-right:1.0000pt solid windowtext;mso-border-right-alt:0.5000pt solid windowtext;
border-top:1.0000pt solid windowtext;mso-border-top-alt:0.5000pt solid windowtext;border-bottom:1.0000pt solid windowtext;
mso-border-bottom-alt:0.5000pt solid windowtext;" ><p class=MsoNormal align=center style="text-align:center;line-height:200%;" ><span style="mso-spacerun:'yes';font-family:宋体;mso-ascii-font-family:Calibri;
mso-hansi-font-family:Calibri;mso-bidi-font-family:'Times New Roman';font-size:10.5000pt;
mso-font-kerning:1.0000pt;" >姓名</span><span style="font-family:宋体;mso-ascii-font-family:Calibri;mso-hansi-font-family:Calibri;
mso-bidi-font-family:'Times New Roman';font-size:10.5000pt;mso-font-kerning:1.0000pt;" ><o:p></o:p></span></p></td><td width=24.9800% valign=top style="width:24.9800%;padding:0.0000pt 5.4000pt 0.0000pt 5.4000pt ;border-left:none;
mso-border-left-alt:none;border-right:1.0000pt solid windowtext;mso-border-right-alt:0.5000pt solid windowtext;
border-top:1.0000pt solid windowtext;mso-border-top-alt:0.5000pt solid windowtext;border-bottom:1.0000pt solid windowtext;
mso-border-bottom-alt:0.5000pt solid windowtext;" ><p class=MsoNormal align=center style="text-align:center;line-height:200%;" ><span style="mso-spacerun:'yes';font-family:宋体;mso-ascii-font-family:Calibri;
mso-hansi-font-family:Calibri;mso-bidi-font-family:'Times New Roman';font-size:10.5000pt;
mso-font-kerning:1.0000pt;" >{{user.name}}</span><span style="font-family:宋体;mso-ascii-font-family:Calibri;mso-hansi-font-family:Calibri;
mso-bidi-font-family:'Times New Roman';font-size:10.5000pt;mso-font-kerning:1.0000pt;" ><o:p></o:p></span></p></td><td width=25.0000% valign=top style="width:25.0000%;padding:0.0000pt 5.4000pt 0.0000pt 5.4000pt ;border-left:none;
mso-border-left-alt:none;border-right:1.0000pt solid windowtext;mso-border-right-alt:0.5000pt solid windowtext;
border-top:1.0000pt solid windowtext;mso-border-top-alt:0.5000pt solid windowtext;border-bottom:1.0000pt solid windowtext;
mso-border-bottom-alt:0.5000pt solid windowtext;" ><p class=MsoNormal align=center style="text-align:center;line-height:200%;" ><span style="mso-spacerun:'yes';font-family:宋体;mso-ascii-font-family:Calibri;
mso-hansi-font-family:Calibri;mso-bidi-font-family:'Times New Roman';font-size:10.5000pt;
mso-font-kerning:1.0000pt;" >出生年月</span><span style="font-family:宋体;mso-ascii-font-family:Calibri;mso-hansi-font-family:Calibri;
mso-bidi-font-family:'Times New Roman';font-size:10.5000pt;mso-font-kerning:1.0000pt;" ><o:p></o:p></span></p></td><td width=25.0000% valign=top style="width:25.0000%;padding:0.0000pt 5.4000pt 0.0000pt 5.4000pt ;border-left:none;
mso-border-left-alt:none;border-right:1.0000pt solid windowtext;mso-border-right-alt:0.5000pt solid windowtext;
border-top:1.0000pt solid windowtext;mso-border-top-alt:0.5000pt solid windowtext;border-bottom:1.0000pt solid windowtext;
mso-border-bottom-alt:0.5000pt solid windowtext;" ><p class=MsoNormal align=center style="text-align:center;line-height:200%;" ><span style="mso-spacerun:'yes';font-family:宋体;mso-ascii-font-family:Calibri;
mso-hansi-font-family:Calibri;mso-bidi-font-family:'Times New Roman';font-size:10.5000pt;
mso-font-kerning:1.0000pt;" >{{user.age}}</span><span style="font-family:Calibri;mso-fareast-font-family:宋体;mso-bidi-font-family:'Times New Roman';
font-size:10.5000pt;mso-font-kerning:1.0000pt;" ><o:p></o:p></span></p></td></tr><tr style="height:24.1000pt;" ><td width=24.9800% valign=top style="width:24.9800%;padding:0.0000pt 5.4000pt 0.0000pt 5.4000pt ;border-left:1.0000pt solid windowtext;
mso-border-left-alt:0.5000pt solid windowtext;border-right:1.0000pt solid windowtext;mso-border-right-alt:0.5000pt solid windowtext;
border-top:none;mso-border-top-alt:0.5000pt solid windowtext;border-bottom:1.0000pt solid windowtext;
mso-border-bottom-alt:0.5000pt solid windowtext;" ><p class=MsoNormal align=center style="text-align:center;line-height:200%;" ><span style="mso-spacerun:'yes';font-family:宋体;mso-ascii-font-family:Calibri;
mso-hansi-font-family:Calibri;mso-bidi-font-family:'Times New Roman';font-size:10.5000pt;
mso-font-kerning:1.0000pt;" >籍贯</span><span style="font-family:宋体;mso-ascii-font-family:Calibri;mso-hansi-font-family:Calibri;
mso-bidi-font-family:'Times New Roman';font-size:10.5000pt;mso-font-kerning:1.0000pt;" ><o:p></o:p></span></p></td><td width=24.9800% valign=top style="width:24.9800%;padding:0.0000pt 5.4000pt 0.0000pt 5.4000pt ;border-left:none;
mso-border-left-alt:none;border-right:1.0000pt solid windowtext;mso-border-right-alt:0.5000pt solid windowtext;
border-top:none;mso-border-top-alt:0.5000pt solid windowtext;border-bottom:1.0000pt solid windowtext;
mso-border-bottom-alt:0.5000pt solid windowtext;" ><p class=MsoNormal align=center style="text-align:center;line-height:200%;" ><span style="mso-spacerun:'yes';font-family:宋体;mso-ascii-font-family:Calibri;
mso-hansi-font-family:Calibri;mso-bidi-font-family:'Times New Roman';font-size:10.5000pt;
mso-font-kerning:1.0000pt;" >{{user.nativePlace}}</span><span style="font-family:宋体;mso-ascii-font-family:Calibri;mso-hansi-font-family:Calibri;
mso-bidi-font-family:'Times New Roman';font-size:10.5000pt;mso-font-kerning:1.0000pt;" ><o:p></o:p></span></p></td><td width=25.0000% valign=top style="width:25.0000%;padding:0.0000pt 5.4000pt 0.0000pt 5.4000pt ;border-left:none;
mso-border-left-alt:none;border-right:1.0000pt solid windowtext;mso-border-right-alt:0.5000pt solid windowtext;
border-top:none;mso-border-top-alt:0.5000pt solid windowtext;border-bottom:1.0000pt solid windowtext;
mso-border-bottom-alt:0.5000pt solid windowtext;" ><p class=MsoNormal align=center style="text-align:center;line-height:200%;" ><span style="mso-spacerun:'yes';font-family:宋体;mso-ascii-font-family:Calibri;
mso-hansi-font-family:Calibri;mso-bidi-font-family:'Times New Roman';font-size:10.5000pt;
mso-font-kerning:1.0000pt;" >现居住</span><span style="font-family:宋体;mso-ascii-font-family:Calibri;mso-hansi-font-family:Calibri;
mso-bidi-font-family:'Times New Roman';font-size:10.5000pt;mso-font-kerning:1.0000pt;" ><o:p></o:p></span></p></td><td width=25.0000% valign=top style="width:25.0000%;padding:0.0000pt 5.4000pt 0.0000pt 5.4000pt ;border-left:none;
mso-border-left-alt:none;border-right:1.0000pt solid windowtext;mso-border-right-alt:0.5000pt solid windowtext;
border-top:none;mso-border-top-alt:0.5000pt solid windowtext;border-bottom:1.0000pt solid windowtext;
mso-border-bottom-alt:0.5000pt solid windowtext;" ><p class=MsoNormal align=center style="text-align:center;line-height:200%;" ><span style="mso-spacerun:'yes';font-family:宋体;mso-ascii-font-family:Calibri;
mso-hansi-font-family:Calibri;mso-bidi-font-family:'Times New Roman';font-size:10.5000pt;
mso-font-kerning:1.0000pt;" >{{user.nowLiving}}</span><span style="font-family:宋体;mso-ascii-font-family:Calibri;mso-hansi-font-family:Calibri;
mso-bidi-font-family:'Times New Roman';font-size:10.5000pt;mso-font-kerning:1.0000pt;" ><o:p></o:p></span></p></td></tr><tr style="height:30.2000pt;" ><td width=24.9800% valign=top style="width:24.9800%;padding:0.0000pt 5.4000pt 0.0000pt 5.4000pt ;border-left:1.0000pt solid windowtext;
mso-border-left-alt:0.5000pt solid windowtext;border-right:1.0000pt solid windowtext;mso-border-right-alt:0.5000pt solid windowtext;
border-top:none;mso-border-top-alt:0.5000pt solid windowtext;border-bottom:1.0000pt solid windowtext;
mso-border-bottom-alt:0.5000pt solid windowtext;" ><p class=MsoNormal align=center style="text-autospace:ideograph-numeric;mso-pagination:none;text-align:center;
line-height:700%;" ><span style="mso-spacerun:'yes';font-family:宋体;mso-ascii-font-family:Calibri;
mso-hansi-font-family:Calibri;mso-bidi-font-family:'Times New Roman';font-size:10.5000pt;
mso-font-kerning:1.0000pt;" >备注</span><span style="font-family:宋体;mso-ascii-font-family:Calibri;mso-hansi-font-family:Calibri;
mso-bidi-font-family:'Times New Roman';font-size:10.5000pt;mso-font-kerning:1.0000pt;" ><o:p></o:p></span></p></td><td width=75.0000% valign=top colspan=3 style="width:75.0000%;padding:0.0000pt 5.4000pt 0.0000pt 5.4000pt ;border-left:none;
mso-border-left-alt:none;border-right:1.0000pt solid windowtext;mso-border-right-alt:0.5000pt solid windowtext;
border-top:none;mso-border-top-alt:0.5000pt solid windowtext;border-bottom:1.0000pt solid windowtext;
mso-border-bottom-alt:0.5000pt solid windowtext;" ><p class=MsoNormal style="line-height:200%;" ><span style="font-family:Calibri;mso-fareast-font-family:宋体;mso-bidi-font-family:'Times New Roman';
font-size:10.5000pt;mso-font-kerning:1.0000pt;" ><o:p> </o:p></span></p><p class=MsoNormal style="line-height:200%;" ><span style="font-family:Calibri;mso-fareast-font-family:宋体;mso-bidi-font-family:'Times New Roman';
font-size:10.5000pt;mso-font-kerning:1.0000pt;" ><o:p> </o:p></span></p><p class=MsoNormal style="line-height:200%;" ><span style="font-family:Calibri;mso-fareast-font-family:宋体;mso-bidi-font-family:'Times New Roman';
font-size:10.5000pt;mso-font-kerning:1.0000pt;" ><o:p> </o:p></span></p></td></tr><tr style="height:72.7000pt;" ><td width=24.9800% valign=center style="width:24.9800%;padding:0.0000pt 5.4000pt 0.0000pt 5.4000pt ;border-left:1.0000pt solid windowtext;
mso-border-left-alt:0.5000pt solid windowtext;border-right:1.0000pt solid windowtext;mso-border-right-alt:0.5000pt solid windowtext;
border-top:none;mso-border-top-alt:0.5000pt solid windowtext;border-bottom:1.0000pt solid windowtext;
mso-border-bottom-alt:0.5000pt solid windowtext;" ><p class=MsoNormal align=center style="text-align:center;" ><span style="mso-spacerun:'yes';font-family:宋体;mso-ascii-font-family:仿宋_GB2312;
mso-hansi-font-family:Calibri;mso-bidi-font-family:'Times New Roman';line-height:200%;
font-size:12.0000pt;mso-font-kerning:1.0000pt;" >本人确认</span><span style="font-family:Calibri;mso-fareast-font-family:宋体;mso-bidi-font-family:'Times New Roman';
font-size:10.5000pt;mso-font-kerning:1.0000pt;" ><o:p></o:p></span></p></td><td width=75.0000% valign=center colspan=3 style="width:75.0000%;padding:0.0000pt 5.4000pt 0.0000pt 5.4000pt ;border-left:none;
mso-border-left-alt:none;border-right:1.0000pt solid windowtext;mso-border-right-alt:0.5000pt solid windowtext;
border-top:none;mso-border-top-alt:0.5000pt solid windowtext;border-bottom:1.0000pt solid windowtext;
mso-border-bottom-alt:0.5000pt solid windowtext;" ><p class=MsoNormal style="text-indent:12.0000pt;mso-char-indent-count:1.0000;" ><span style="font-family:宋体;mso-ascii-font-family:仿宋_GB2312;line-height:200%;
font-size:12.0000pt;mso-font-kerning:0.0000pt;" ><o:p> </o:p></span></p><p class=MsoNormal style="text-indent:12.0000pt;mso-char-indent-count:1.0000;" ><span style="mso-spacerun:'yes';font-family:宋体;mso-ascii-font-family:仿宋_GB2312;
line-height:200%;font-size:12.0000pt;mso-font-kerning:0.0000pt;" >本人已知悉。</span><span style="font-family:仿宋_GB2312;mso-fareast-font-family:宋体;mso-hansi-font-family:宋体;
mso-bidi-font-family:宋体;line-height:200%;font-size:12.0000pt;
mso-font-kerning:0.0000pt;" ><o:p></o:p></span></p><p class=MsoNormal style="text-indent:12.0000pt;mso-char-indent-count:1.0000;" ><span style="font-family:仿宋_GB2312;mso-fareast-font-family:宋体;mso-hansi-font-family:宋体;
mso-bidi-font-family:宋体;line-height:200%;font-size:12.0000pt;
mso-font-kerning:0.0000pt;" ><o:p> </o:p></span></p><p class=MsoNormal style="text-indent: 192pt;"><span style="mso-spacerun:'yes';font-family:宋体;mso-ascii-font-family:仿宋_GB2312;
line-height:200%;font-size:12.0000pt;mso-font-kerning:0.0000pt;" > </span><span style="mso-spacerun:'yes';font-family:宋体;mso-ascii-font-family:仿宋_GB2312;
line-height:200%;font-size:12.0000pt;mso-font-kerning:0.0000pt;" >本人</span><span style="mso-spacerun:'yes';font-family:宋体;mso-ascii-font-family:仿宋_GB2312;
line-height:200%;font-size:12.0000pt;mso-font-kerning:0.0000pt;" >签名：</span><span style="font-family:宋体;mso-ascii-font-family:仿宋_GB2312;line-height:200%;
font-size:12.0000pt;mso-font-kerning:0.0000pt;" ><o:p></o:p></span></p><p class=MsoNormal ><span style="font-family:仿宋_GB2312;mso-fareast-font-family:宋体;mso-hansi-font-family:宋体;
mso-bidi-font-family:宋体;line-height:200%;font-size:12.0000pt;
mso-font-kerning:0.0000pt;" ><o:p> </o:p></span></p><p class=MsoNormal style="text-indent:270.0000pt;mso-char-indent-count:16.0000;" ><span style="mso-spacerun:'yes';font-family:宋体;mso-ascii-font-family:仿宋_GB2312;
line-height:200%;font-size:12.0000pt;mso-font-kerning:0.0000pt;margin-right: 30px;" >年</span><span style="font-family:宋体;mso-ascii-font-family:仿宋_GB2312;line-height:200%;
font-size:12.0000pt;mso-font-kerning:0.0000pt;" > </span><span style="font-family:宋体;mso-ascii-font-family:仿宋_GB2312;line-height:200%;
font-size:12.0000pt;mso-font-kerning:0.0000pt;" > </span><span style="font-family:宋体;mso-ascii-font-family:仿宋_GB2312;line-height:200%;
font-size:12.0000pt;mso-font-kerning:0.0000pt;" > </span><span style="mso-spacerun:'yes';font-family:宋体;mso-ascii-font-family:仿宋_GB2312;
line-height:200%;font-size:12.0000pt;mso-font-kerning:0.0000pt;margin-right: 30px;" >月</span><span style="mso-spacerun:'yes';font-family:宋体;mso-ascii-font-family:仿宋_GB2312;
line-height:200%;font-size:12.0000pt;mso-font-kerning:0.0000pt;" > </span><span style="mso-spacerun:'yes';font-family:宋体;mso-ascii-font-family:仿宋_GB2312;
line-height:200%;font-size:12.0000pt;mso-font-kerning:0.0000pt;" >日</span><span style="font-family:宋体;mso-ascii-font-family:仿宋_GB2312;line-height:200%;
font-size:12.0000pt;mso-font-kerning:0.0000pt;" ><o:p></o:p></span></p><p class=MsoNormal style="text-indent:192.0000pt;mso-char-indent-count:16.0000;" ><span style="font-family:宋体;mso-ascii-font-family:仿宋_GB2312;line-height:200%;
font-size:12.0000pt;mso-font-kerning:0.0000pt;" ><o:p> </o:p></span></p></td></tr></table><p class=MsoNormal ><span style="mso-spacerun:'yes';font-family:Calibri;mso-fareast-font-family:宋体;
mso-bidi-font-family:'Times New Roman';font-size:10.5000pt;mso-font-kerning:1.0000pt;" ><o:p> </o:p></span></p></div>
</div>
</div>
</div>
</template> <script>
import CommonUtil from "@/utils/commonUtil.js" export default {
data(){
return{
user:{
name:"huanzi-qch",
age:"2020年11月",
nativePlace:"广西南宁",
nowLiving:"广东广州"
}
}
},
created() {
//引入 html2canvas、jspdf
CommonUtil.importJsByUrl("https://cdn.bootcss.com/html2canvas/0.5.0-alpha2/html2canvas.min.js");
CommonUtil.importJsByUrl("https://cdn.bootcss.com/jspdf/1.5.3/jspdf.min.js");
},
methods:{
pdf(){
window.html2canvas(document.getElementById("body"), {
allowTaint: true,
useCORS: true,
scale: 2,
background: "#eef1f5",
}).then(function(canvas) {
let contentWidth = canvas.width;
let contentHeight = canvas.height;
//一页pdf显示html页面生成的canvas高度;
let pageHeight = contentWidth / 592.28 * 841.89;
//未生成pdf的html页面高度
let leftHeight = contentHeight;
//页面偏移
let position = 0;
//a4纸的尺寸[595.28,841.89]，html页面生成的canvas在pdf中图片的宽高
let imgWidth = 595.28;
let imgHeight = 592.28/contentWidth * contentHeight; let pageData = canvas.toDataURL('image/jpeg', 1.0); let pdf = new window.jsPDF('', 'pt', 'a4'); //有两个高度需要区分，一个是html页面的实际高度，和生成pdf的页面高度(841.89)
//当内容未超过pdf一页显示的范围，无需分页
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('exportPdf.pdf');
})
},
img(){
window.html2canvas(document.getElementById("body"), {
allowTaint: true,
useCORS: true,
scale: 2,
background: "#eef1f5",
}).then((canvas) => {
//创建一个隐藏的下载a标签
let link = document.createElement("a");
link.style.display = "none";
link.setAttribute("download", "exportImg.png");
link.href = canvas.toDataURL('image/png'); document.body.appendChild(link);
link.click(); // 执行 <a> 元素的下载 //过河拆桥
link.remove();
});
},
}
}
</script> <style scoped>
.app-ccontent{
padding: 20px;
width: 794px;
background-color: #eef1f5;
}
</style>
关键代码
//转成PDF并下载
pdf(){
window.html2canvas(document.getElementById("body"), {
allowTaint: true,
useCORS: true,
scale: 2,
background: "#eef1f5",
}).then(function(canvas) {
let contentWidth = canvas.width;
let contentHeight = canvas.height;
//一页pdf显示html页面生成的canvas高度;
let pageHeight = contentWidth / 592.28 * 841.89;
//未生成pdf的html页面高度
let leftHeight = contentHeight;
//页面偏移
let position = 0;
//a4纸的尺寸[595.28,841.89]，html页面生成的canvas在pdf中图片的宽高
let imgWidth = 595.28;
let imgHeight = 592.28/contentWidth * contentHeight; let pageData = canvas.toDataURL('image/jpeg', 1.0); let pdf = new window.jsPDF('', 'pt', 'a4'); //有两个高度需要区分，一个是html页面的实际高度，和生成pdf的页面高度(841.89)
//当内容未超过pdf一页显示的范围，无需分页
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('exportPdf.pdf');
})
},
//转成图片并下载
img(){
window.html2canvas(document.getElementById("body"), {
allowTaint: true,
useCORS: true,
scale: 2,
background: "#eef1f5",
}).then((canvas) => {
//创建一个隐藏的下载a标签
let link = document.createElement("a");
link.style.display = "none";
link.setAttribute("download", "exportImg.png");
link.href = canvas.toDataURL('image/png'); document.body.appendChild(link);
link.click(); // 执行 <a> 元素的下载 //过河拆桥
link.remove();
});
},
效果
页面
下载下来的文件
后记
转成PDF后就可以方便的进行打印了；转成图片后就方便把文件发给领导看了；nice！
参考文章：
https://segmentfault.com/a/1190000015820189
https://www.cnblogs.com/xinjie-just/p/13513118.html
https://juejin.cn/entry/6844903586682372109
https://blog.csdn.net/cpongo3/article/details/93623678
html页面转PDF、图片操作记录的更多相关文章
- Nginx中防盗链（下载防盗链和图片防盗链）操作记录
日常运维工作中,设置防盗链的需求会经常碰到,这也是优化网站的一个必要措施.今天在此介绍Nginx中设置下载防盗链和图片防盗链的操作~ 一.Nginx中下载防盗链的操作记录对于一些站点上的下载操作,有很 ...
- Nginx中防盗链（下载防盗链和图片防盗链）及图片访问地址操作记录
日常运维工作中,设置防盗链的需求会经常碰到,这也是优化网站的一个必要措施.今天在此介绍Nginx中设置下载防盗链和图片防盗链的操作~ 一.Nginx中下载防盗链的操作记录对于一些站点上的下载操作,有很 ...
- 【译】在Asp.Net中操作PDF – iTextSharp - 操作图片
原文 [译]在Asp.Net中操作PDF – iTextSharp - 操作图片 作为我的iTextSharp系列的文章的第七篇,开始探索使用iTextSharp在PDF中操作图片,理解本篇文章需要看 ...
- C# PDF Page操作——设置页面切换按钮 C# 添加、读取Word脚注尾注 C#为什么不能像C/C++一样的支持函数只读传参 web 给大家分享一个好玩的东西，也许你那块就用的到
C# PDF Page操作——设置页面切换按钮 概述 在以下示例中,将介绍在PDF文档页面设置页面切换按钮的方法.示例中将页面切换按钮的添加分为了两种情况,一种是设置按钮跳转到首页.下页.上页或者 ...
- 将jsp页面转化为图片或pdf升级版（二）（qq:1324981084）
java高级架构师全套vip教学视频,需要的加我qq1324981084 上面我们已经将jsp页面转化成html页面了,那么接下来我们的目标是利用这个html页面形成pdf或图片格式.这里我用到的是w ...
- iTextSharp简单生成pdf和操作pdf添加水印
遇到需要导出页面到pdf,并添加pdf水印的业务.稍微研究了下,借阅网友的前车之鉴,经过使用可行之后的代码贴出来,做个记录,也供需要的网友借阅. public class PDFSetWaterMar ...
- nginx缓存配置的操作记录梳理
web缓存位于内容源Web服务器和客户端之间,当用户访问一个URL时,Web缓存服务器会去后端Web源服务器取回要输出的内容,然后,当下一个请求到来时,如果访问的是相同的URL,Web缓存服务器直接输 ...
- Javascript 将 HTML 页面生成 PDF 并下载
最近碰到个需求,需要把当前页面生成 pdf,并下载.弄了几天,自己整理整理,记录下来,我觉得应该会有人需要 :) html2canvas 简介 我们可以直接在浏览器端使用html2canvas,对整个 ...
- js将 HTML 页面生成 PDF 并下载
最近碰到个需求,需要把当前页面生成 pdf,并下载.弄了几天,自己整理整理,记录下来,我觉得应该会有人需要 :) 先来科普两个插件: html2Canvas 简介 我们可以直接在浏览器端使用html2 ...
随机推荐
- C# 微信access_token缓存和过期刷新
摘自:http://blog.csdn.net/hechurui/article/details/22398849 首先建立一个Access_token类 /// <summary> // ...
- 2020年的UWP（2）——In Process App Service
最早的时候App Service被定义为一种后台服务,类似于极简版的Windows Service.App Service作为Background Task在宿主UWP APP中运行,向其他UWP A ...
- MVC实现修改数据
前言 前言 最近没什么好写的,所以写个修改来巩固一下知识 控制器 public ActionResult UpdeteCartsNum(SYS_Carts sYS_Carts) { var list ...
- Django折腾日记(django2.0)
新建项目 django-admin startproject mysite 运行 python manage.py runserver 创建一个应用 python manage.py startapp ...
- hdu6115 Factory （LCA + 倍增）
Factory Time Limit: 20000/10000 MS (Java/Others) Memory Limit: 132768/132768 K (Java/Others)Total ...
- JUC之线程池-三大方法-七大参数-四种拒绝策略
线程池:重点 三大方法 七大参数 四种拒绝策略 使用池化技术的理由: 我们的程序伴随着创建销毁线程十分浪费资源, 所以使用线程池,先创建线程,随用随取,用完归还 简单来说就是节约了资源. 使用线程池的 ...
- sentinel控制台的使用
一,下载sentinel控制台:sentinel-dashboard-1.7.0.jar , 注 1.7.1版本控制台与最新的sentinel有冲突,会报invalid type错误 二,启动sent ...
- 使用Node.js原生API写一个web服务器
Node.js是JavaScript基础上发展起来的语言,所以前端开发者应该天生就会一点.一般我们会用它来做CLI工具或者Web服务器,做Web服务器也有很多成熟的框架,比如Express和Koa.但 ...
- Callable返回执行结果
使用ExecutorService.Callable.Future实现有返回结果的多线程. public class MainActivity extends AppCompatActivity { ...
- Spring学习-Bean的基本概念知识
4月份开始复习一遍spring相关知识.让自己巩固一下spring大法的深奥益处,所以就看了大佬的博客,转载留下来日后继续研读.认为重点的标记为红色 转载自:http://www.cnblogs.co ...