手动点击 打印

本文主要是介绍手动点击 打印，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

// 最初调用函数
function submit() {
const style = getStyle();
// 需要打印的数据获取innerHTML
const container = getContainer(document.querySelector('.next-drawer-body')?.innerHTML);

document.body.appendChild(style);
document.body.appendChild(container);

getLoadPromise(container).then(() => {
window.onbeforeprint = function () {
// 将一些不需要打印的元素隐藏
console.log(container.querySelector('.funcButton'), 'qianqi1');
container.querySelector('.funcButton')?.setAttribute('style', 'display:none');
};
window.print();
window.onafterprint = function () {
// 放开隐藏的元素
console.log(container.querySelector('.funcButton'), 'wanceng1');
container.querySelector('.funcButton')?.setAttribute('style', 'display:block');
};
document.body.removeChild(style);
document.body.removeChild(container);
});
}

// 设置打印样式
function getStyle() {
const styleContent = `#print-container {
display: none;
}
@media print {
body > :not(.print-container) {
display: none;
}
html,
body {
display: block !important;
}
#print-container {
display: block;
}
}`;
const style = document.createElement('style');
style.innerHTML = styleContent;
return style;
}

// 清空打印内容
function cleanPrint() {
const div = document.getElementById('print-container');
if (div) {
(document.querySelector('body') as any).removeChild(div);
}
}

// 新建DOM，将需要打印的内容填充到DOM
function getContainer(html) {
cleanPrint();
const container = document.createElement('div');
container.setAttribute('id', 'print-container');
container.innerHTML = html;
return container;
}

// 图片完全加载后再调用打印方法
function getLoadPromise(dom) {
let imgs = dom.querySelectorAll('img');
imgs = [].slice.call(imgs);

if (imgs.length === 0) {
return Promise.resolve();
}

let finishedCount = 0;
return new Promise((res) => {
function check() {
finishedCount++;
if (finishedCount === imgs.length) {
res;
}
}
imgs.forEach((img) => {
img.addEventListener('load', check);
img.addEventListener('error', check);
});
});
}

这篇关于手动点击 打印的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！