html 打印相关操作与实现详解
2020-05-20 16:18:45
来源:
互联网
文章主要介绍了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', ()=> {});
以上就是html 打印相关操作与实现详解的全部内容,希望对大家的学习有所帮助