调用浏览器打印功能的实现

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