3. 操作步骤
3.1 步骤一:创建自定义页面
准备容器组件、按钮组件和想要打印内容的组件。将需要打印的内容放置在容器组件内,设置容器组件属性。
图3.1 设置容器组件属性
3.2 步骤二:打印实现
为了页面美观,表格组件的操作列、顶部操作和分页都设置了不显示;
表格内容的详细配置可以参考:自定义页面表格实现数据管理页功能;
按钮组件设置onclik点击动作,实现点击按钮时调用浏览器的功能,打印指定区域。
图3.2-1 调用浏览器的打印功能打印指定区域
下述代码可直接复制到 JS 面板,注意:需要替换容器组件唯一标识。
export function onClick(){
//绘制需要打印的区域为容器组件内的内容
const printPart = document.getElementById('div_ktdxeg0h');
window.document.body.innerHTML = "";
window.document.body.appendChild(printPart);
let oldstr = window.document.body.innerHTML;
//调用print()方法去打印定义的网页区域
window.print();
document.body.innerHTML = oldstr;
location.reload();
}
调用完成后自定义打印预览中有页眉和页脚,可以取消勾选将其去掉,去掉后可以选择另存为pdf去保存。
图3.2-2 设置打印预览
4 实现效果
4.1 自定义页面打印表格组件
图4.1 打印表格内容
4.2 自定义页面打印 JSX 组件
图4.2 自定义打印样式
相关参考:自定义页面打印 | 钉钉宜搭·帮助中心