DOM元素打印(Window.print)
/**
*
* @param parentDom 被打印Dom的父dom元素/父元素id
* @param title 页眉标题
* @param zoom 缩放比例
* @param rotate 旋转角度
*/
export function printDom({ parentDom, title = '', zoom = 0.5, rotate = 0 }) {
try {
// 获取打印DOM
if (typeof dom === 'string') {
parentDom = document.getElementById(parentDom)
}
// 当前页面样式
var headDom = document.getElementsByTagName('head')[0]
// 创建iframe
var iframe = document.createElement('iframe')
// 设置iframe样式
iframe.setAttribute(
'style',
'position:absolute;width:0px;height:0px;left:-500px;top:-500px;'
)
// 在页面插入iframe
var f = document.body.appendChild(iframe)
// 获取iframe内的html
var w = f.contentWindow || f.contentDocument
var doc = f.contentDocument || f.contentWindow.document
// 经需要打印的DOM插入iframe
var printMain = document.createElement('div')
printMain.setAttribute(
'style',
`size: A4 portrait;zoom: ${zoom};transform:rotate(${rotate}deg);`
)
printMain.innerHTML = parentDom.innerHTML
doc.body.appendChild(printMain)
// 设置iframe内的header,添加样式文件
var head = doc.getElementsByTagName('head')[0]
head.innerHTML = headDom.innerHTML
head.getElementsByTagName('title')[0].innerHTML = title
// 关闭iframe
doc.close()
// 使iframe失去焦点
w.focus()
// 调用iframe的打印方法
setTimeout(() => {
w.print()
// 移除iframe
w.close()
document.body.removeChild(iframe)
}, 1000)
} catch (e) {
console.log(e)
this.$message.error(e)
}
}