DDR爱好者之家

html 打印相关操作与实现详解
站长资源 2024/12/25 佚名
63 1538
DDR爱好者之家 Design By 杰米

原理为调用 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', ()=> {});

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

DDR爱好者之家 Design By 杰米
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
DDR爱好者之家 Design By 杰米
ddrfans.com DDR爱好者之家
8,675无损音乐
1,324高清电影
213破解软件
70,141收录资讯

更新日志

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网
DDR爱好者之家 Design By 杰米