- 联系我们
- duidaima.com 版权声明
- 闽ICP备2020021581号
-
闽公网安备 35020302035485号
闽公网安备 35020302035485号
在浏览器上打印应该一个比较常见的操作。最简单的打印方式就是直接点击浏览器右上角，找到“打印”按钮或者调用window.print()。通过此方式，就能将当前页面整个打印出来了。然而，实际情况下大多数需求都不会如此简单。更多的可能是需要打印页面中的某一段“特定”内容或者自定义内容。这就需要用到自定义打印了。
临时的 Iframe 标签创建完成后将需要打印的内容拼接成 html 字符串渲染到 Iframe 里面，再执行iframe.contentWindow.print()。
/**
* 堆代码 duidaima.com
* 打印方法实现
*/
const handlePrintByLocalIframe = ({ printHtml }) => {
// 判断是否已经存在该iframe
let iframe: any = document.getElementById('J_printIframe');
if (!iframe) {
// 新建一个隐藏起来的iframe，并将其添加到当前页面的dom里面
iframe = document.createElement('IFRAME');
iframe.setAttribute('id', 'J_printIframe');
iframe.setAttribute('style', 'position: absolute; width: 0px; height: 0px;left:-5000px;top:-5000px;');
document.body.appendChild(iframe);
}
const doc = iframe.contentWindow.document;
// 将需要打印的html字符串写入iframe
doc.write(printHtml);
doc.close();
iframe.contentWindow.focus();
setTimeout(function () {
// 对iframe执行打印操作
//延迟50ms是为了解决第一次样式不生效的问题
iframe.contentWindow.print();
}, 50);
// 网上有人加了这一段代码，应该是为了兼容ie，这个看个人需求添加上。
if (navigator.userAgent.indexOf('MSIE') > 0) {
document.body.removeChild(iframe);
}
};
html 字符串拼接方法实现如下：/**
* 生成 Iframe 内嵌页面字符串并执行打印
* 为了将业务和打印功能分开，这里将打印的 html 页面做成了一个 html 模板，并上传至 cdn。
* 后分别拉取 html 模板、接口数据、然后通过第三方库 mustache 来组装生成 html 字符串。
* 最后将其传入前面的打印方法进行打印
*/
// 从cdn上获取html字符串
const htmlStr = await fetchRemoteData('这里填写html模板字符串的cdn地址');
// 从服务端获取数据
const data = await fetchRemoteData('这里获取接口数据，用于打印文件的数据');
// 使用mustache模板语法进行渲染（需要和html模板字符串模板一致，可以使用其他模板如 handlebars）
const printHtml = mustache.render(htmlStr, data);
// 执行打印
handlePrintByLocalIframe(printHtml);
至此，一个基本的打印功能就完成了，针对单页打印、普通文本的打印场景已经足够了。只是，这就结束了吗？当然不会，实际需求中还有很多复杂的打印场景，比如报表打印。打印报表的时候往往会涉及到分页、页头、页眉、页脚等比较复杂的场景。很显然，面对这些“有理”要求，仅靠上面这个方案还做不到。
上文实现的打印，其实现原理就是拼接 html 字符串，然后将字符串传入 iframe，然后进行打印。而作为一名前端开发，操作 html 就像呼吸一样简单，想要在网页上画出来分页、表头、页眉、页脚这些根本没什么难度可言。因此，理论上只需要在原方案基础上做“亿点优化”就可以解决了。下面介绍一下本人的设计实现方案，其核心在于自定义分页。
const data = {
pageTitle: '多页模板的数据',
pageList: [
{
// 只有第一页有head，后面的页没有
pageHead: true,
pageNum: 1, // 当前页属于第1页
list: [
{
dataId: 1,
dataName: 'dataName1',
dataNum: 8,
},
//...第一页的其他数据 28 条
],
},
{
pageHead: false, // 除了第1页其他页面都不需要标题信息。
pageNum: 2, // 当前页属于第2页
list: [
{
dataId: 2,
dataName: 'dataName2',
dataNum: 6,
},
//...第2页的其他数据 28 + 2 条，多了pageHead 的空间所以多两条
],
},
],
};
这份数据属于是定制化数据，具体数据格式与需要打印的 html 模板文件有关。/**
* serverDataList 为接口返回的原始数组数据
* 此方法将原始的数据转换成每一页单独需要的特定数据格式
* 这里仅是一个示例，具体复杂度跟其打印的业务和模板文件有关
* 理论上可以实现任何打印
*/
const calculatePageNum = (serverDataList) => {
// 这里的数值需要手动测量，毕竟每一行的高度都不一样，需要根据实际情况测试出来
const firstPageMaxNum = 36;
const otherPageMaxNum = 40;
const pageList = [];
let currentPage = 0; // 当前遍历到第几页
serverDataList.forEach((item, index) => {
const { dataId, dataName, dataNum } = item;
currentPage = index < firstPageMaxNum ? 1 : 1 + Math.ceil((index + 1 - firstPageMaxNum) / otherPageMaxNum);
if (!pageList[currentPage - 1]) {
pageList[currentPage - 1] = {
pageHead: currentPage === 1,
pageNum: currentPage,
list: [item],
};
} else {
pageList[currentPage - 1].list.push(item);
}
});
return pageList;
};
上述方法最终输出的是一个大的 pageList， 内部有一个小的 list。pageList 包含的是各个页面的数据，而 list 包含的是某一页的列表数据。除此之外，还有当前页面的页码，是否应该包含头部信息等。可以看出，这份数据就是为分页服务的，有了这份数据，我们只需要同步设计出相应的 html 模板.然后将对应的数据传入模板进行渲染就能得到相应的分页 html 字符串了。<body class="a4-body">
<!-- pageList的数组长度就是当前页数，这里是一个遍历循环 -->
{{#pageList}}
<section class="a4-page">
{{#pageHead}}
<header class="head">
<h2>{{pageTitle}}</h2>
</header>
{{/pageHead}}
<table class="a4-table">
<tr>
<th>数据ID</th>
<th>数据名称</th>
<th>数据数量</th>
</tr>
<!-- 这里list就是当前页面的数据，每一页的长度可以不一样，如果有header这里就少几行 -->
{{#list}}
<tr>
<td>{{dataId}}</td>
<td>{{dataName}}</td>
<td>{{dataNum}}</td>
</tr>
{{/list}}
</table>
</section>
<ul class="a4-footer">
<li>第{{pageNum}}页 总{{pageList.length}}页</li>
</ul>
{{/pageList}}
</body>
不难看出，当我们将前面格式化出来的 pageList 数据渲染到如上模板就能得到多个 pageList。每个 pageList 又包含多个数据行list，最终输出的就是一个完整的分页 html 字符串结构了。当然，仅仅有对应的结构是不够的，作为 html 页面，还需要配合对应的 css 样式。所以，我们还需要用 css 来做一些布局来保证 pageList 里面的一个 item 的总高度为 A4 的高度。
/* css全部使用mm作为单位 */
.a4-body {
width: 208mm; /** 这里的宽度就是A4纸的宽度 */
margin: 0 auto;
text-align: center;
}
.a4-page {
width: 100%;
padding: 6mm;
/** 这里高度 + a4-footer 的高度就是整张A4纸的高度(297mm) */
height: 288mm;
margin: 0 auto;
box-sizing: border-box;
}
.a4-footer {
line-height: 9mm;
}
至此，有了 html 模板和 css 负责处理 ui 和布局，传入分割好的数据，最终就能渲染出固定样式的 html 页面内容了。后面不论需要打印的内容如何变化，只需要处理好这几部分之间的关系，我们就能得到对应的 html 页面，将其塞入 iframe 就能打印任意内容。前面我们都是调用的浏览器自带的打印能力，即 window.print()方法触发的浏览器预览打印。这种方式非常简单，接入也不麻烦。然而，它有一个不容疏忽的缺点（也不算缺点，毕竟浏览器并不是专业打印设备，需要考虑到安全性和通用性），那就是打印触发之前它一定会弹出一个“预览”大弹窗。而有时候我们的需求是点击按钮就实现打印，直接给打印机发出打印指令，不要弹出打印“预览”弹窗。通过各种途径了解到，这是无法实现的，至少纯“浏览器前端”，通过浏览器端的 js 无法实现。
2.能够与浏览器进行通信。
连接和管理电脑设备上的打印机这个这里不做详细介绍，网上有成熟实现方案，使用 electron 自带的 API 即可实现。至于如何与浏览器进行通信，也不是麻烦，这里简单介绍下实现思路。其实也很简单，无非就是一个 Socket 通信。我们只需要在此应用上启用一个 Socket Server 服务，此服务监听一个端口，比如：18877。
