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', ()=> {});

以上便是本文的所有內容,期待对大伙儿的学习培训有一定的协助,也期待大伙儿多多适用脚本制作之家。