2023年2月21日16:41:38更新:
1.解决跨域图片导出不了的问题
引用建议:
1.js、声明img和导出pdf部分可以直接复制过去,注意一下img加载时候div的id还有导出pdf时候获取导出体的代码,js中已经注释了;
2.html部分仅供参考,不要搬过去,不要搬过去,不要搬过去;
首先引入js
<script src="https://cdn.bootcdn.net/ajax/libs/html2canvas/0.4.1/html2canvas.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/jspdf/1.0.272/jspdf.debug.js"></script>
部分html代码
<div class="layui-row" style="padding: 0 20px;margin-bottom: 20px;">
<div class="layui-card" style="padding-top: 50px" id="layuiCard">
<div class="layui-card-header">
<h2 style="text-align: center;font-weight: bold;">重点营运车辆卫星定位装置在线核查报告</h2>
</div>
<div class="layui-card-body">
<div class="layui-row layui-col-space5" style="text-align: center;margin-left: 100px;margin-right: 100px">
<div class="layui-col-md12">
<p class="tableTitleStyle">运输业户情况</p>
<table class="layui-table">
<thead>
<tr>
<td rowspan="2">车牌号</td>
<td rowspan="2">设备类型</td>
<td rowspan="2">定位时间</td>
<td colspan="7">数据对接状态</td>
</tr>
<tr>
<td>定位情况</td>
<td>分段限速</td>
<td>司机卡</td>
<td>疲劳报警</td>
<td>超速报警</td>
<td>主动安全报警</td>
<td>附件上传</td>
</tr>
</thead>
<tbody>
<tr>
<td>冀C12345</td>
<td>部标北斗</td>
<td>2025-10-07 00:00:00</td>
<td>已对接</td>
<td>已对接</td>
<td>已对接</td>
<td>已对接</td>
<td>已对接</td>
<td>已对接</td>
<td>已对接</td>
</tr>
</tbody>
</table>
</div>
<div class="layui-col-md12">
<p class="tableTitleStyle">在网证明</p>
<div class="imagebox" id="imagebox" ></div>
</div>
</div>
</div>
</div>
<div class="layui-row">
<button style="width: 100%" class="layui-btn layuiadmin-btn-comm layui-btn-sm"
onclick="exportPdf()">导出pdf
</button>
</div>
</div>
最后定义一个方法
//声明img 没有图片可以跳过这一步 直接到保存pdf
var img = new Image()
img.crossOrigin = "Anonymous";//解决跨域图片问题
img.src = "你的图片地址";
//加载图片
img.onload = function () {<!-- -->
var canvas = document.createElement("canvas");
var ctx = canvas.getContext("2d");
var width = img.width;
var height = img.height;
canvas.width = width;
canvas.height = height;
//绘制到canvas上
ctx.drawImage(img, 0, 0, width, height);
document.getElementById("imagebox").appendChild(canvas);//改成自己的id
}
//保存pdf
exportPdf = function () {
let elementById = document.getElementById("layuiCard");//如果想导出body,就直接ducument.body
window.pageYOffset = 0;
document.documentElement.scrollTop = 0;
document.body.scrollTop = 0;
let pdf = new jsPDF('p', 'pt', 'a4');
html2canvas(elementById , {
useCORS: true,
allowTaint: false,
taintTest: true,
scale: 2
}).then(function (canvas) {
var contentWidth = canvas.width;
var contentHeight = canvas.height;
//一页pdf显示html页面生成的canvas高度;
var pageHeight = contentWidth / 592.28 * 841.89;
//未生成pdf的html页面高度
var leftHeight = contentHeight;
//页面偏移
var position = 0;
//a4纸的尺寸[595.28,841.89],html页面生成的canvas在pdf中图片的宽高
// var imgWidth = 515.28;//595.28//左右边距40
// var imgHeight = 512.28/contentWidth * contentHeight;//左右边距40
var imgWidth = 595.28;
var imgHeight = 595.28/contentWidth * contentHeight;
var pageData = canvas.toDataURL('image/jpeg', 1.0);
var pdf = new jsPDF('', 'pt', 'a4');
//有两个高度需要区分,一个是html页面的实际高度,和生成pdf的页面高度(841.89)
//当内容未超过pdf一页显示的范围,无需分页
if (leftHeight < pageHeight) {<!-- -->
pdf.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight );//左右边距0
} else {<!-- -->
while(leftHeight > 0) {<!-- -->
pdf.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight)//左右边距0
leftHeight -= pageHeight;
position -= 841.89;
//避免添加空白页
if(leftHeight > 0) {<!-- -->
pdf.addPage();
}
}
}
pdf.save(carPlateNum + "重点营运车辆卫星定位装置在线核查报告" + '.pdf');
})
})
查看效果: