vue前端实现打印功能

方案一：window.print()   

这个命令默认打印整个页面的内容，所以，如果想要实现局部打印功能的话，就要重新给body赋值，并且后续执行完之后再还原回去，这样的话会造成一些非预期的结果，很麻烦，并且在当前也操作，window.document.body的内容重新渲染，打印完会有刷新，影响用户的体验，所以不推荐

方案二：利用iframe，iframe.contentDocument.execCommand('

Print')

<template>
    <div>
        <!--需要打印的页面的某个div-->
        <div id="dynamic-table-page">
            <div>我是需要打印的内容</div>
        </div>
        <!--打印用的隐藏的iframe-->
        <iframe width="0" height="0" frameborder="0" id="oprs-iframe"></iframe>
	</div>
</template>

<script>
    export default {
		mounted() {
			this.setIframeCss();
		},
		methods: {
	        setIframeCss() {
				// 在打印的iframe里加入项目已经写好的样式
				let syfPrint = document.getElementById('oprs-iframe');
				let documentHead = document.getElementsByTagName('head')[0];
				let iframeHead = syfPrint.contentDocument.getElementsByTagName('head')[0];
				iframeHead.innerHTML = documentHead.innerHTML;
			},
            doPrint(){
                this.setIframeCss(); // 打印的时候加入样式
                setTimeout(() => {
                    let printHtml = document.getElementById('dynamic-table-page').innerHTML;
					let syfPrint = document.getElementById('oprs-iframe');
					syfPrint.contentDocument.body.innerHTML = printHtml;
                    // 也可在此处修改要打印的html内容再调用打印
                    syfPrint.contentDocument.execCommand('Print');
                    // this.$refs.iframe.contentWindow.print(); // 也可试试这个方法打印
                }, 200);
            }
        }
    }
</script>

要注意样式引入之后再处理打印逻辑，否则有可能打印的页面会没有样式，也可以单独引入一个print.scss或者使用@media print {}再调整一些样式 

效果图：

方案三：将要打印的内容生成一个图片然后放在iframe中，利用html2canvas 生成截图

1、首先需要在package.json先安装html2canvas

2、代码如下

<template>
    <div>
        <div ref="printContent">
            <div>我是需要打印的内容></div>
        </div>
        <!--打印用的隐藏的iframe-->
        <iframe width="0" height="0" frameborder="0" id="print-iframe"></iframe>
    </div>
</template>

<script>
import html2canvas from 'html2canvas';
export default {
	methods: {
        setIframeCss() {
            // 在打印的iframe里加样式
			let syfPrint = document.getElementById('print-iframe');
			let documentHead = document.getElementsByTagName('head')[0];
			let iframeHead = syfPrint.contentDocument.getElementsByTagName('head')[0];
			iframeHead.innerHTML = documentHead.innerHTML;
		},
		doPrint() {
			let _this = this;
			this.loading = true;
			this.setIframeCss();
			let dataURL;
			html2canvas(this.$refs.printContent, {
              backgroundColor: null,
              scale: 1
            }).then(canvas => {
				dataURL = canvas.toDataURL('image/png');
				let img = new Image();
				console.log(dataURL, 'ddwdwdw');
				img.src = dataURL;
				img.onload = function() {
					let syfPrint = document.getElementById('print-iframe');
					syfPrint.contentDocument.body.innerHTML = '<div class="common-form print-img-form">' + `<img src="${dataURL}"/>` + '</div>';
					syfPrint.contentDocument.execCommand('Print');
                    // this.$refs.iframe.contentWindow.print()
					_this.loading = false;
				};
			});
		}
    }
}
</script>

将截图放在iframe中的img打印，截图一般会有些模糊，调整html2canvas的参数scale，放大缩小的比例，要根据实际情况调整 

总结：

大家肯定实际情况选择合适的方法打印