前端实现自定义打印表格
第一种方式
import printJS from "print-js";- 实现方法
//打印时间
let nowTime = util.formatDate.format(new Date(), "yyyy-MM-dd hh:mm:ss");
//查看时间
let checkDate =
this.statisticsFormIn.CheckYear == ""
? ""
: `${this.statisticsFormIn.CheckYear[0]} -
${this.statisticsFormIn.CheckYear[1]}`;
//数据
this.tableDataML = this.queryRecordStatisticsTableData;
let FileAllNum = null;
let ItemAllNum = null;
let PageAllNum = null;
this.tableDataML.forEach(item => {
FileAllNum += item.FileNum;
ItemAllNum += item.ItemNum;
PageAllNum += item.PageNum;
});
let countRow = {
index: "总数",
Depart: "-",
CreateYear: "-",
CategoryA: "-",
CategoryC: "-",
CategoryD: "-",
FileNum: FileAllNum,
ItemNum: ItemAllNum,
PageNum: PageAllNum
};
this.tableDataML.push(countRow);
//html格式
let allHtml = "";
//打印每页数量
let printPerPage = 20;
for (
var j = 0;
j < Math.ceil(this.tableDataML.length / printPerPage);
j++
) {
let tableML = [];
tableML = this.tableDataML.slice(
j * printPerPage,
(j + 1) * printPerPage
);
let html = "";
let contenthtml = "";
let tdCount = 0; //需要遍历的td数量
html +=
'<div style="width:100%;height:100vh"> <table id="printTable" class="printTable" ref="printTable"> <tr> <th colspan="9"> <h1>社保查阅档案统计表</h1> </th> </tr> <tr> <td class="headers" colspan="2">打印时间</td> <td class="headers" colspan="2">' +
nowTime +
' </td> <td class="headers" colspan="2">查阅时间</td> <td class="headers" colspan="3">' +
checkDate +
'</td> </tr> <tr> <td class="headers">序号</td> <td class="headers">科室</td> <td class="headers">年度</td> <td class="headers">档案类型</td> <td class="headers">大环节</td> <td class="headers">业务类型</td> <td class="headers">卷数</td> <td class="headers">件数</td> <td class="headers">页数</td> </tr>';
if (tableML.length > printPerPage) tdCount = printPerPage;
else tdCount = tableML.length;
for (var i = 0; i < tdCount; i++) {
contenthtml +=
"<tr> <td>" +
(tableML[i].index == null
? printPerPage * j + i + 1
: tableML[i].index) +
"</td><td>" +
(tableML[i].Depart == null ? "" : tableML[i].Depart) +
"</td> <td>" +
(tableML[i].CreateYear == null ? "" : tableML[i].CreateYear) +
"</td> <td>" +
(tableML[i].CategoryA == null ? "" : tableML[i].CategoryA) +
"</td> <td>" +
(tableML[i].CategoryC == null ? "" : tableML[i].CategoryC) +
"</td> <td>" +
(tableML[i].CategoryD == null ? "" : tableML[i].CategoryD) +
"</td> <td>" +
(tableML[i].FileNum == null ? "" : tableML[i].FileNum) +
"</td> <td>" +
(tableML[i].ItemNum == null ? "" : tableML[i].ItemNum) +
"</td> <td>" +
(tableML[i].PageNum == null ? "" : tableML[i].PageNum) +
"</td> </tr>";
}
//总共20行 不够20行 剩下的补空
if (tableML.length < printPerPage) {
for (var f = 0; f <= printPerPage - 1 - tableML.length; f++) {
contenthtml +=
" <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> ";
}
}
html += contenthtml;
html += "</table></div>";
allHtml += html;
}
printJS({
printable: allHtml,
type: "raw-html",
targetStyles: ["*"],
style:
"table { border: 1px solid black; height:40px; bordercolor:black }tr,td {border: 1px solid #ccc;height:39px;}.printTable { width: 100%; height: 100%; text-align: center; font-size: 13px; font-family: 宋体; border-collapse: collapse; border: 1px solid #000; color: #000000 }.printTable .headers {padding: 5px;height: 30px;font-size: 16px;font-family: 华文中宋;font-weight: 550;}"
});
第二种方式:
import printJS from "print-js";- 实现方法
this.printTable = JSON.stringify(this.queryRecordStatisticsTableData);
this.printTable = JSON.parse(this.printTable);
this.printTable.forEach((item, index) => {
if (item.index == null) item.index = index + 1;
if (item.Depart == null) item.Depart = "";
if (item.CreateYear == null) item.CreateYear = "";
if (item.CategoryA == null) item.CategoryA = "";
if (item.CategoryC == null) item.CategoryC = "";
if (item.CategoryD == null) item.CategoryD = "";
if (item.FileNum == null) item.FileNum = "";
if (item.ItemNum == null) item.ItemNum = "";
if (item.PageNum == null) item.PageNum = "";
});
let FileAllNum = null;
let ItemAllNum = null;
let PageAllNum = null;
this.printTable.forEach(item => {
FileAllNum += item.FileNum;
ItemAllNum += item.ItemNum;
PageAllNum += item.PageNum;
});
let countRow = {
index: "总数",
Depart: "-",
CreateYear: "-",
CategoryA: "-",
CategoryC: "-",
CategoryD: "-",
FileNum: FileAllNum,
ItemNum: ItemAllNum,
PageNum: PageAllNum
};
this.printTable.push(countRow);
let nowTime = util.formatDate.format(new Date(), "yyyy-MM-dd hh:mm:ss");
let checkDate =
this.statisticsFormIn.CheckYear == ""
? ""
: `${this.statisticsFormIn.CheckYear[0]} -
${this.statisticsFormIn.CheckYear[1]}`;
printJS({
printable: this.printTable,
header: `<div style="display: flex;flex-direction: column;text-align: center">
<h3>社保查阅档案统计表</h3>
<p style="text-align:lef;margin-bottom: 20px;font-size: 12px;">打印时间:${nowTime} 查看日期:${checkDate}</p>
</div>`,
repeatTableHeader: true,
properties: [
{ field: "index", displayName: "序号" },
{ field: "Depart", displayName: "科室" },
{ field: "CreateYear", displayName: "年度" },
{ field: "CategoryA", displayName: "档案类型" },
{ field: "CategoryC", displayName: "大环节" },
{ field: "CategoryD", displayName: "业务类型" },
{ field: "FileNum", displayName: "卷数" },
{ field: "ItemNum", displayName: "件数" },
{ field: "PageNum", displayName: "页数" }
],
type: "json",
scanStyles: false,
style:
"tr td{width: 92%;height: 100%;text-align: center;font-size:13px;font-family:宋体;border-collapse: collapse; border:1px solid #000;color:#000000}table th{width:6%;padding:5px;height:30px;font-size:16px;font-family:华文中宋;font-weight: 550;}" // 表格样式
});
第三种方式:
后端返回pdf文件流
