vue项目使用浏览器打印局部页面

项目需求是生成个报告输出为pdf和word格式下载到本地。本来使用jspdf实现的领导看了说字体太糊。检查发现因为那本来就是张图片映射到pad上的大小改变了所以字体啥的丢帧了。

然后改成用windows.print实现。

let bdhtml =document.getElementById('clc').innerHTML;
				console.log(bdhtml);
				window.document.body.innerHTML = bdhtml;
				window.print();
				window.location.reload()

js代码就这样。html里面写个div  给个id获取到就行。原理是获取到html里的元素然后创建一个新的页面打印出来。没有找到直接打印html元素的方法。

------------------------------------------------------------------

然后遇到了个非常奇怪的bug。生成的pdf样式写在style里面无法生效，只能写行内样式。 

还有个bug如果最顶部有上边距的话，打印出来的页面就会变成两个页面，包含一个空白页面。解决方法就是把顶部的上边距给去掉

html代码如下：

       要打印的内容

还有个问题我也没解决，window.location.reload（）这个方法是为了刷新页面。打印时生成的页面会替换掉原先的页面，就显得很丑。如果哪位大神知道怎么解决自动跳转的问题欢迎赐教，不胜感激 

-------------

想起了一个笨方法：

在新窗口打开要生成的页面，然后打印完成后关闭新窗口。有点自欺欺人的感觉。体验比原先的好了一丢丢

	let bdhtml =document.getElementById('clc').innerHTML;
				console.log(bdhtml);
				var newWindow = window.open();
				newWindow.document.write(bdhtml);
				newWindow.print();
				newWindow.close()