现在做一家宠物sass行业，公司产品打印需要实现动态表头表尾功能，这个实际上并不是很麻烦，现在学习到了一些新的技术方案，在此记录一下。
首先聊一聊打印吧
浏览器提供方法 window.print()
这个方法只针对于整个页面，这时候延伸出第一个问题，如何打印制定页面内容。这个市面上用的比较多的就是动态创建iframe把需要打印的内容添加到这个iframe里面，调用iframe内部的window.print() 实现打印。
这里有一些需要注意的地方
input textarea select 这几个东西是绑定value的 需要转换成innerHTML进行打印
我们可以把这些封装成一个方法,挂载到vue的实例上,可以在添加一些参数options，以下是方法源码
// 使用方式
// this.$print(this.$refs[value], options)
// options 参数 noPrint 不打印的元素
// iframeStyle 可以从写打印样式
// 未来添加表头 表尾 标识 剪裁表头表尾
// 打印类属性、方法定义
const Print = function (dom, options) {
if (!(this instanceof Print)) return new Print(dom, options);
this.options = this.extend({
'noPrint': '.no-print',
"iframeStyle": "",
"noRecursion": true
}, options);
if ((typeof dom) === "string") {
this.dom = document.querySelector(dom);
} else {
this.isDOM(dom)
this.dom = this.isDOM(dom) ? dom : dom.$el;
}
this.init();
};
Print.prototype = {
init: function () {
var content = this.getStyle() + this.getHtml();
this.writeIframe(content);
},
extend: function (obj, obj2) {
for (var k in obj2) {
obj[k] = obj2[k];
}
return obj;
},
getStyle: function () {
var str = "",
styles = document.querySelectorAll('style,link');
for (var i = 0; i < styles.length; i++) {
str += styles[i].outerHTML;
}
if (this.options.iframeStyle) {
str += "<style>" + this.options.iframeStyle + "</style>"
}
str += "<style>" + (this.options.noPrint ? this.options.noPrint : '.no-print') + "{display:none;}</style>";
return str;
},
getHtml: function () {
var inputs = document.querySelectorAll('input');
var textareas = document.querySelectorAll('textarea');
var selects = document.querySelectorAll('select');
for (var k = 0; k < inputs.length; k++) {
if (inputs[k].type == "checkbox" || inputs[k].type == "radio") {
if (inputs[k].checked == true) {
inputs[k].setAttribute('checked', "checked")
} else {
inputs[k].removeAttribute('checked')
}
} else if (inputs[k].type == "text") {
inputs[k].setAttribute('value', inputs[k].value)
} else {
inputs[k].setAttribute('value', inputs[k].value)
}
}
for (var k2 = 0; k2 < textareas.length; k2++) {
if (textareas[k2].type == 'textarea') {
textareas[k2].innerHTML = textareas[k2].value
}
}
for (var k3 = 0; k3 < selects.length; k3++) {
if (selects[k3].type == 'select-one') {
var child = selects[k3].children;
for (var i in child) {
if (child[i].tagName == 'OPTION') {
if (child[i].selected == true) {
child[i].setAttribute('selected', "selected")
} else {
child[i].removeAttribute('selected')
}
}
}
}
}
let outerHTML = this.wrapperRefDom(this.dom).outerHTML
return outerHTML;
},
wrapperRefDom: function (refDom) {
let prevDom = null
let currDom = refDom
if(this.options.noRecursion) {
return currDom
}
if (!this.isInBody(currDom)) return currDom
while (currDom) {
if (prevDom) {
let element = currDom.cloneNode(false)
element.appendChild(prevDom)
prevDom = element
} else {
prevDom = currDom.cloneNode(true)
}
currDom = currDom.parentElement
}
return prevDom
},
writeIframe: function (content) {
var w, doc, iframe = document.createElement('iframe'),
f = document.body.appendChild(iframe);
iframe.id = "myIframe";
//iframe.style = "position:absolute;width:0;height:0;top:-10px;left:-10px;";
iframe.setAttribute('style', 'position:absolute;width:0;height:0;top:-10px;left:-10px;');
w = f.contentWindow || f.contentDocument;
doc = f.contentDocument || f.contentWindow.document;
doc.open();
doc.write(content);
doc.close();
var _this = this
// 是Safari 打印走这个逻辑
if ((/Safari/.test(navigator.userAgent) && !/Chrome/.test(navigator.userAgent))) {
var _timer = setInterval(function() {
if (doc.readyState == 'complete') {
clearInterval(_timer);
_this.toPrint(w);
setTimeout(function () {
document.body.removeChild(iframe)
}, 100)
}
}, 1000);
}else {
iframe.onload = function() {
_this.toPrint(w);
setTimeout(function () {
document.body.removeChild(iframe)
}, 100)
}
}
},
toPrint: function (frameWindow) {
try {
setTimeout(function () {
frameWindow.focus();
try {
if (!frameWindow.document.execCommand('print', false, null)) {
frameWindow.print();
}
} catch (e) {
frameWindow.print();
}
frameWindow.close();
}, 10);
} catch (err) {
console.log('err', err);
}
},
// 检查一个元素是否是 body 元素的后代元素且非 body 元素本身
isInBody: function (node) {
return (node === document.body) ? false : document.body.contains(node);
},
isDOM: (typeof HTMLElement === 'object') ?
function (obj) {
return obj instanceof HTMLElement;
} :
function (obj) {
return obj && typeof obj === 'object' && obj.nodeType === 1 && typeof obj.nodeName === 'string';
}
};
const MyPlugin = {}
MyPlugin.install = function (Vue, options) {
// 添加实例方法
Vue.prototype.$print = Print
}
export default MyPlugin
这时候我们只是实现了一个最简单的打印部分内容。
继续延伸，去实现动态的表头和表尾。表头表尾，我们内部讨论过技术方案，最后定稿方案。
方案： 事先确定需要打印的是A4还是A5 横向还是纵向，因为他们尺寸都是固定的。如果是A4 横向，我们就这个尺寸去算出来这一页减去表头，表尾里面可以放下多少内容，然后在把内容追加到指定的页就ok啦。
技术细节: 首先把需要做分页的内容外层设置为 position: absolute; z-index: -1，再把需要分页的内容统一添加一个class，等页面渲染完成之后，获取到所有有这个class的元素，并且拿到他们的height，根据height，动态追加到不同的页里面去。部分代码如下
<div ref="printBox" class="record">
<div class="preview" v-for="(it, i) in pageArr" :key="i">
<div class="preview-con recordImg" ref="print">
<div class="header">
<img :src="logo" alt="" v-if="logo">
<div style="text-align: center">
<p class="tit">{{ userInfo.tenant_name }}</p>
<p class="tit">{{ disposalPrintA4.typeItem == '影像' ? XlightInfo.lv2_category_id == 599 ? '' : XlightInfo.lv2_category_name : disposalPrintA4.typeItem }}检查报告单</p>
</div>
<div class="medical">
<!-- <p @click="toPrint" v-if="i === 0" class="print-btn">打印</p> -->
<p class="number">病历号：<span>{{ customerInfo.pet.medical_record_no }}</span></p>
</div>
</div>
<section class="main" v-html="it"></section>
<div class="footer">
<div class="footer-left">
<div>
<span>检查时间：{{ formatDate(inspec_time) }}</span>
<span v-if="disposalPrintA4.typeItem != '化验'">申请医生：{{ apply_user_name }}</span>
<span>检查医生：{{ inspect_user_name }}</span>
</div>
<div>备注：报告为此次检查记录，结果仅供临床参考</div>
</div>
<div>- 第<span>{{ i + 1 }}</span>页 共 <span>{{ pageArr.length }}</span> 页 -</div>
</div>
</div>
</div>
</div>
async mounted() {
this.$nextTick(() => {
let heightArr = []
let totalHeight = 0
let rowIndexArr = [0]
let eleArr = document.getElementsByClassName('row-auto-paging')
for (let i = 0; i < eleArr.length; i++) {
heightArr.push(eleArr[i].clientHeight)
}
for (let i = 0; i < heightArr.length; i++) {
totalHeight += heightArr[i]
if (totalHeight > 833) {
rowIndexArr.push(i)
// 超过当前页 heightArr[i] 表示下页第一条数据高度
totalHeight = heightArr[i]
}
}
let classArr = []
for (let i = 0; i < rowIndexArr.length; i++) {
// slice截取 [rowIndexArr[i], rowIndexArr[i + 1]) 包括左侧不包括右侧
classArr = Array.from(eleArr).slice(rowIndexArr[i], rowIndexArr[i + 1])
let eleStr = '' // 元素节点字符串
for (let index = 0; index < classArr.length; index++) {
eleStr += classArr[index].outerHTML
}
this.pageArr.push(eleStr)
}
// 判断是否导出打印
if (!this.isExport && !this.isView) {
this.$nextTick(() => {
setTimeout(() => {
this.$print(this.$refs.printBox)
}, 1000)
})
}
})
}
这样做可以实现需求，但是有一些弊端，需要事先知道打印的是A4 或者是A5 但是浏览器选择的纸张大小，是浏览器弹出来的，最后选择什么，实际上代码也不知道，如果不按照之前设想的方式打印，就会导致表头表尾位置不对。
image.png
24年2月1号 看到了一些关于浏览器的打印的新东西
我们可以设置浏览器打印弹框里面的A4 A5 横向 纵向等功能。
@page {
margin: 0mm;
/* 纵向 */
size: A5 landscape;
/* 横向 */
/* size: landscape; */
/* 边距 上右下左 */
/* margin: 1cm 2cm 1cm 2cm; */
}
.page-break {
page-break-after: always;
}
@page size 可以设置纸张和横向还是纵向 margin:0mm；调整A4 A5会无效
添加page-break的class (page-break-after: always) 会独自生成一页
官方文档 https://developer.mozilla.org/en-US/docs/Web/CSS/@page
image.png
image.png
网友评论