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 href="/example.css" media="print" rel="stylesheet" /> 标注打印时才会采用的样式
• 监听打印事件 window.addEventListener('beforeprint|| afterprint', ()=> { } );
@H_304_27@

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

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！