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 = '@media print {@page { margin: 5mm; }}' content.document.getElementsByTagName('head')[0].appendChild(styleEle) /* 保障 iframe 中资源加载完成，图片要用 img 形式引入 */ 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; /* visibility:hidden; */ } /*纸张设置为宽1200px 高800px*/ @page{ size:1200px 800px; }}

• <link media="print" rel="stylesheet" /> 标注打印时才会采用的样式
• 监听打印事件 window.addEventListener('beforeprint|| afterprint', ()=> {});

以上就是本文的全部内容，希望对大家的学习有所帮助，

• 0
• 0
• 0
• 0
• 0