浏览器打印

zxkking

已于 2023-03-02 17:34:04 修改

阅读量337

点赞数

文章标签： html css 前端

于 2023-03-02 17:25:41 首次发布

本文链接：https://blog.csdn.net/weixin_43159131/article/details/129305319

版权

文章讲述了在使用JavaScript进行打印操作时遇到的问题，即通过window.print()打印的内容不满足需求，因为CSS样式可能失效。作者通过获取特定ID的元素内容，替换body的innerHTML来实现打印指定内容，但这样做会导致之前写在style中的CSS不起作用。为了解决这个问题，作者选择将CSS直接写入标签内，并在打印后刷新页面以恢复原状。

摘要由CSDN通过智能技术生成

一般情况下就是window.open()跳转到一个新的页面，新的页面相当于打印预览，然后进行打印。
在这里插入图片描述

然后点击打印进行打印
window.print()默认打印的是当前页的全部内容;那肯定不符合我们的要求，我们打印的时候要选择打印的内容，但是这样会导致写在style中的css失效，试了网上其他方法没有用，就把所有css直接写在标签里了
打印代码如下

//window.print()默认打印的是当前页的全部内容
//所以获取自己要打印的内容，将它赋值给整个Body
let subOutputRankPrint = document.getElementById('yourTableID');
let newContent = subOutputRankPrint.innerHTML;
document.body.innerHTML = newContent;
window.print();
//window.print()之后如果用户取消打印重新打印会失效，所以每次都重新加载一下页面
window.location.reload();