今天小编跟大家讲解下有关html 打印相关操作与实现详解 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关html 打印相关操作与实现详解 的相关资料，希望小伙伴们看了有所帮助。
原理为调用 window.print() 方法 但是该方法只能对当前页面全部打印 所以有了以下方案来解决局部打印
1: 利用 iframe 将需要打印的元素和样式注入 再调用打印
// 示例代码function print () { let ifElement = document.getElementById('ifId') const addHtmlPrint = () => { const content = ifElement.contentWindow || ifElement.contentdocument content.document.body.innerHTML = this.detailTable const styleEle = document.createElement('style') styleEle.innerHTML = [email protected] print [email protected] { margin: 5mm; }}' content.document.getElementsByTagName('head')[0].appendChild(styleEle) ifElement.onload = () => { content.print() } } this.getDetailTable() if (ifElement) { // 若已经创建 则直接打印 addHtmlPrint() } else { ifElement = document.createElement('iframe') ifElement.setAttribute('id', 'ifId') ifElement.setAttribute('style', 'display:none') document.body.appendChild(ifElement) addHtmlPrint() }}2: 利用 @media print 在当前页面设置打印操作时需要隐藏的元素
@media print{ .hidden-element{ display:none; } @page{ size:1200px 800px; }} <link href="/example.css" media="print" rel="stylesheet" /> 标注打印时才会采用的样式 监听打印事件 window.addEventListener('beforeprint|| afterprint', ()=> {});以上就是本文的全部内容 希望对大家的学习有所帮助 也希望大家多多支持爱蒂网。
来源：爱蒂网
