window.print()实现打印指定内容——功能实现

àì夳堔傛蜴生んèń 2022-09-16 11:20 217阅读 0赞

最近在做后台管理系统时，需要实现一个打印功能，打印的内容为页面上指定的`dom`。此时可以通过`window.print()`功能来实现：

# `html`部分 #

<button @@click="printpage">打印部分内容</button>
    <div id="printContent">
        <h1>打印内容</h1>
        <br />
        <br />
        <br />
        <div>打印内容打印内容打印内容打印内容打印内容打印内容打印内容打印内容打印内容打印内容打印内容打印内容打印内容</div>
        <div>222打印内容打印内容打印内容打印内容打印内容打印内容打印内容打印内容打印内容打印内容打印内容打印内容打印内容</div>
    </div>

# `css`部分 #

@media print { 
       body { 
       		//设置一下边框，可以显示内容的范围，用于测试
            border: 1px solid red;
            //添加height:auto;才能打印多页，否则只能打印一页
            height: auto;
        }
      h1,div { 
      	//添加样式，打印时的样式可以跟页面上的样式不一致
        font-size: 50px;
        color: red;
      }
        h1 { 
        	//在某个元素之前添加分页符，也就是在此元素之前实现换页，具体给哪个元素换页，需要自行判断，然后指定换页样式的类名即可
            page-break-before: always;
        }
        .footer { 
        	//在某个元素之后添加分页符，也就是在此元素之后实现换页，具体给哪个元素换页，需要自行判断，然后指定换页样式的类名即可
            page-break-after: always;
        }
        @page { 
            overflow: visible;
            /* 纵向 */
            size: portrait;
            /* 边距 上右下左 */
            margin: 1cm 2cm 1cm 2cm;
        }
    }

# `js`部分 #

function printpage() { 
    	//打印的整体思路是：获取body的内容进行存储，然后获取打印区域的内容填充到body中，进行打印，打印完成后，再将之前存储的body内容重新赋值给body即可。windown.print()默认打印的内容是body的内容。
        let oldStr = window.document.body.innerHTML;
        let newStr = document.getElementById('printContent').innerHTML;
        window.document.body.innerHTML = newStr;
        window.print();
        window.document.body.innerHTML = oldStr;
    }

最终功能实现！！！