JS纯前端导出PDF及分页和使用window.print()保存PDF |
您所在的位置：网站首页 › excel表格怎么完整导出pdf怎么保存 › JS纯前端导出PDF及分页和使用window.print()保存PDF |
JS纯前端导出PDF及分页和使用window.print()保存PDF
|
最近由于项目要求需要将导出PDF类文件，其中涉及到固定表头，翻页，样式调整等问题 一开始选择了网上较多讲解的使用html2canvas.js和jspdf.js先转图片再转PDF的方法。
var xsxf = document.getElementById("export_content");
html2canvas(
xsxf,
//document.getElementById("export_content"),
{
dpi: 172,//导出pdf清晰度
//proxy: "string",
onrendered: function (canvas) {
var contentWidth = canvas.width;
var contentHeight = canvas.height;
//一页pdf显示html页面生成的canvas高度;
var pageHeight = 840;
//var pageHeight = contentWidth / 575 * 840;
//未生成pdf的html页面高度
var leftHeight = contentHeight;
//pdf页面偏移
var position = 0;
//html页面生成的canvas在pdf中图片的宽高（a4纸的尺寸[595.28,841.89]）
var imgWidth = 595.28;
var imgHeight = 592.28 / contentWidth * contentHeight;
var pageData;
var pdf = new jsPDF('', 'pt', 'a4');
//有两个高度需要区分，一个是html页面的实际高度，和生成pdf的页面高度(841.89)
//当内容未超过pdf一页显示的范围，无需分页
if (leftHeight
while (leftHeight > 0) {
pageData = canvas.toDataURL('image/jpeg', 1.0);
pdf.addImage(pageData, 'JPEG', 10, position + 5, imgWidth - 20, imgHeight - 10)
leftHeight -= pageHeight;
position -= 841.89;
//避免添加空白页
if (leftHeight > 0) {
pdf.addPage();
}
}
}
pdf.save(filename);
},
//背景设为白色（默认为黑色）
background: "#fff"
});
但很快发现当表格数据量大时出现翻页问题，所以试着先将表头固定数据取出，表体数据进行分割拼接表头 //大于一页分页表头固定 function reFullHtml(wb, filename, _tableHead, rowNum, pageHeight) { var tableH = document.querySelector('#table_content').scrollHeight + 70; var miH = (pageHeight - tableH); //详细 var trL = $('#mini-grid-table1 > tbody>tr').length; var max = parseInt(miH / 34); var firstNum = rowNum - 2 + max; var page = Math.ceil(trL / max); var brhtml = ""; //PL表尾 if (rowNum == 12 && firstNum > (trL + rowNum - 5)) { firstNum = trL + rowNum - 6; page = Math.ceil(trL / (max - 5)); brhtml = brhtml + ""; } //CI表尾（特殊德国小家电） if (rowNum == 14 && firstNum > (trL + rowNum - 1)) { firstNum = trL + rowNum - 2; page = Math.ceil(trL / (max - 1)); brhtml = brhtml + ""; } //判断一页内行数高度+表头高是否大于页高 if ((firstNum - rowNum) * 34 + 75 > miH) { firstNum -= 1; brhtml = ''; } var beforNum = firstNum; var newWb = wb; var pNum = firstNum - rowNum - 2; var syNum = pageHeight - (pNum + 1) * 34 - tableH; var nbrHtml = "" for (var c = 0; c if ((firstNum - beforNum) * 34 + 75 > miH) { firstNum -= 1; brhtml = ''; } beforNum = firstNum; var reg = ".*"; var res = newWb.match(reg); if (res != null) { if (res.length > 0) { var newHead = newWb.replace(res[0], brhtml); newWb = newHead + _tableHead + res[0]; } } firstNum += pNum; brhtml = nbrHtml; } if (firstNum firstNum = trL + rowNum - 6; brhtml = ""; } else if (rowNum == 14) { firstNum = trL + rowNum - 2; brhtml = ""; } var reg1 = ".*"; var res1 = newWb.match(reg1); if (res1 != null) { if (res1.length > 0) { var newHead = newWb.replace(res1[0], brhtml); newWb = newHead + _tableHead + res1[0]; } } } var xsxf = document.getElementById("export_content"); xsxf.innerHTML = "" + newWb; rowNum = 1; if (newWb != "") { //var pageWidth = document.querySelector("#mini-grid-table1").scrollWidth; for (var p = 0; p width:750px; }3、特殊列设置固定宽（列文字多的），其他使用百分比 function downPDF(wb, filename, _tableHead, rowNum, dataNum) { var xsxf = document.getElementById("export_content"); html2canvas( xsxf, //document.getElementById("export_content"), { //dpi: 172,//导出pdf清晰度 dpi: 144, //proxy: "string", onrendered: function (canvas) { var contentWidth = canvas.width; var contentHeight = canvas.height; //一页pdf显示html页面生成的canvas高度; var pageHeight = 840; //var pageHeight = contentWidth / 575 * 840; //未生成pdf的html页面高度 var leftHeight = contentHeight; //pdf页面偏移 var position = 0; //html页面生成的canvas在pdf中图片的宽高（a4纸的尺寸[595.28,841.89]） var imgWidth = 595.28; var imgHeight = 592.28 / contentWidth * contentHeight; var pageData; var pdf = new jsPDF('', 'pt', 'a4'); if (leftHeight > pageHeight) { if (rowNum != 1) { reFullHtml(wb, filename, _tableHead, rowNum, dataNum); return; } } //20210826 hsj 原转PDF转图片失真严重，直接调用window打印方法保存 //有两个高度需要区分，一个是html页面的实际高度，和生成pdf的页面高度(841.89) //当内容未超过pdf一页显示的范围，无需分页 //if (leftHeight < pageHeight) { // pageData = canvas.toDataURL('image/jpeg', 1.0); // pdf.addImage(pageData, 'JPEG', 10, 5, imgWidth - 20, imgHeight - 10); //} else { // while (leftHeight > 0) { // pageData = canvas.toDataURL('image/jpeg', 1.0); // pdf.addImage(pageData, 'JPEG', 10, position + 5, imgWidth - 20, imgHeight - 10) // leftHeight -= pageHeight; // position -= 841.89; // //避免添加空白页 // if (leftHeight > 0) { // pdf.addPage(); // } // } //} //pdf.save(filename); window.print(); }, //背景设为白色（默认为黑色） background: "#fff" }); } //大于一页分页表头固定 function reFullHtml(wb, filename, _tableHead, rowNum, dataNum) { var trL = $('#mini-grid-table1 > tbody>tr').length; var max = 20; if (dataNum>10) { max = 27; } else if (dataNum == 10){ max = 25; } else if (dataNum >7) { max = 22; } var firstNum = rowNum + 2 + max; var page = Math.ceil(trL / max); var brhtml = ""; var newWb = wb; for (var i = 0; i if (res.length > 0) { var newHead = newWb.replace(res[0], brhtml); //style='page-break-after:always' 分页属性 newWb = newHead + "" + _tableHead + res[0]; } } else { if (rowNum == 12) { firstNum = trL + rowNum - 5; brhtml = ""; } else if (rowNum == 14) { firstNum = trL + rowNum - 1; brhtml = ""; } var reg1 = ".*"; var res1 = newWb.match(reg1); if (res1 != null) { if (res1.length > 0) { var newHead = newWb.replace(res1[0], brhtml); newWb = newHead + "" + _tableHead + res1[0]; } } } firstNum += max; } if (firstNum firstNum = trL + rowNum - 5; brhtml = ""; } else if (rowNum == 14) { firstNum = trL + rowNum - 2; brhtml = ""; } var reg1 = ".*"; var res1 = newWb.match(reg1); if (res1 != null) { if (res1.length > 0) { var newHead = newWb.replace(res1[0], brhtml); newWb = newHead + "" + _tableHead + res1[0]; } } } var xsxf = document.getElementById("export_content"); xsxf.innerHTML = "" + newWb + ""; rowNum = 1; if (newWb != "") { if (dataNum >= 10) { for (var n = 0; n document.querySelectorAll("#sjs-A1")[p].width = (pageWidth - 20) + "px"; document.querySelectorAll("#sjs-A5")[p].width = (pageWidth - 20) / 2 + "px"; document.querySelectorAll("#sjs-E5")[p].width = (pageWidth - 20) / 2 + "px"; } downPDF(newWb, filename, _tableHead, rowNum); } }效果 参考资料：https://www.jianshu.com/p/4d65857ffe5e https://segmentfault.com/a/1190000018701596 |
总结：总体来说还是使用最开始导出PDF的思路，先在html中解决分页问题后导出，不过放弃转成图片方式而直接使用原生方法。整体解决了分页问题和不清晰无法复制等问题。【本文地址】