跳到主要内容

实用工具 - 自定义打印

能力

免费版

轻享版

专业版

专属版

自定义页面

不支持

不支持

支持

支持

1. 使用场景

借助此文档,我们探讨一下如何在宜搭中实现自定义打印。

2. 自定义打印函数

// 自定义打印函数
// printPartDomId:指定打印区域的id,若无此id,默认打印全页
export function printPage(printPartDomId = '') {
const printPartDom = document.querySelector(printPartDomId ? `#${printPartDomId}` : (self === top ? '.next-shell-main' : '#App'));
if (printPartDom) {
if (!printPartDomId) {
// 默认打印当前页面 - 若存在底部 footer 关闭底部 footer
const footerDom = document.querySelectorAll('.stickyFooter');
if (footerDom.length) {
// 打印时移除底部 footer
const footerParent = footerDom[0].parentElement;
footerParent.removeChild(footerDom[0]);
};
};
window.document.body.innerHTML = '';
window.document.body.appendChild(printPartDom);
setTimeout(() => {
window.print();
location.reload();
}, 1000);
} else {
this.utils.toast({
title: '未获取到打印内容,请使用浏览器手动打印',
type: 'error'
});
};
}

3. 使用

3.1. 自定义页面使用

3.1.1. 创建自定义页面

将需要打印的内容放置到容器中,并开启“将唯一标识用作 DOM ID”选项。

3.1.2. 配置打印组件

:root {
margin-top: 12px;
display: flex;
flex-direction: row-reverse;
}

@media print {
:root {
display: none;
}
}

3.1.3. 绑定事件

export function onClick(){
this.printPage('div_lbq7kcu0');
}

3.2. 普通表单数据详情打印

3.2.1. 创建表单页面

可将 3.1.2 中配置的打印组件直接拷贝到表单页面中。

3.2.2. 绑定事件

3.3. 流程表单数据详情打印

3.3.1. 创建流程表单页面

可将 3.1.2 中配置的打印组件直接拷贝到流程页面中。

3.3.2. 绑定事件

4. 实现效果

4.1. 自定义页面

4.2. 普通表单

4.3. 流程表单

5. 在线试玩

Copyright © 2024钉钉(中国)信息技术有限公司和/或其关联公司浙ICP备18037475号-4