1.打印方法有很多,参考链接如下:
https://juejin.cn/post/7151622002988548103
遇到的问题:
问题1:样式不管用?
解决方法:写到行内一部分样式管用,但是像分行(word-break: break-all;)并不管用,暂没解决??
问题2:打印前进行其他操作,再点击打印:img不显示?
解决方法:加个延时器。在write写入时,同时执行了iframe.contentWindow.print();方法;所以需要等待write完毕,再调print方法,这时已经获取到了img。
打印方法1代码:
footerPrint() {
const printContentHtml = document.getElementById("print").innerHTML;
const iframe = document.createElement("iframe");
iframe.setAttribute(
"style",
"width: 250px !important;",
);
document.body.appendChild(iframe);
iframe.contentDocument.write(printContentHtml);
setTimeout(() => {
iframe.contentDocument.close();
iframe.contentWindow.print();
document.body.removeChild(iframe);
},1000);
},
打印方法2:
和上面参考链接不同点:等待页面图片加载完成开始打印,不知道为啥用链接上的方法老是报错,所以采用了更简单的延时器
footerPrint() {
// 获取打印的局部内容
const para2Content = document.querySelector("#print").innerHTML;
this.printHtml(para2Content);
},
printHtml(html) {
let printContainer = this.getContainer(html);
let printStyle = this.getStyle();
document.body.appendChild(printStyle);// 添加到页面
document.body.appendChild(printContainer);
setTimeout(() => {// 等待页面图片加载完成开始打印,并在打印完成之后移除旧ODM
window.print();
document.body.removeChild(printStyle);
document.body.removeChild(printContainer);
},1000);
},
// 新建DOM,将需要打印的内容填充到DOM
getContainer(html) {
this.cleanBeforePrintDom();
let container = document.createElement("div");
container.setAttribute("id", "print-container");
container.innerHTML = html;
return container;
},
// 创建新的打印DOM前先移除之前可能存在的旧DOM
cleanBeforePrintDom() {
let printContainer = document.getElementById("print-container");
if (printContainer) document.body.removeChild(printContainer);
},
//设置打印样式
getStyle() {
let styleContent = `
#print-container {
width:236px;
word-break: break-all;
font-size:15px;
}
@media print {
body > :not(.print-container) {
display: none;
}
html,
body {
display: block;
}
#print-container {
width:236px;
word-break: break-all;
font-size:15px;
display: block;
}
}`;
let style = document.createElement("style");
style.innerHTML = styleContent;
return style;
},
打印单张图片参考链接:
https://juejin.cn/post/7133212338877890574