一、场景一：打印场景中不包含图片
1. 创建空白页面，使用网格布局、数据详情、按钮组件构建打印场景。
2. 自定义 javascript 方法为打印实践方法，命名为 print。
export default async function({event, data}) { console.log('打印', event, data) /**把内容转换成图片格式进行打印 */ await new Promise((resolve,reject) => { const s = document.createElement('script') s.src= 'https://html2canvas.hertzen.com/dist/html2canvas.min.js' s.onload = resolve s.onerror = reject document.head.appendChild(s) }) const element = document.querySelector(`#idXX`) // 选择到要打印的组件id或者class，转换为canvas，其中 idXXX 表示要打印的元素 const hide_element = element.querySelector(`#idXXX`);// 选择要隐藏的元素，其中 idXXX 表示要隐藏的元素 hide_element.style.visibility = 'hidden' if(!element) { throw new Error('要打印的内容不存在') } const { width, height } = element.getBoundingClientRect() const canvas = await window.html2canvas(element) // 打印 let winPrint = window.open('', '', `left=0,top=0,width=${width},height=${height},toolbar=0,scrollbars=0,status=0`); winPrint.document.body.appendChild(canvas); winPrint.document.close(); winPrint.focus(); winPrint.print(); hide_element.style.visibility = 'visible';// 恢复被隐藏的元素 ，其中 idXXX 表示要隐藏的元素 winPrint.close();}
3. 给打印按钮添加点击事件，并绑定打印方法 print。
4. 打开调试工具，找出到打印区域 div 的 ID，当前举例 ID 是 root。
5. 如果希望在打印的时候不显示打印按钮，可以找出打印按钮 div 的 ID，当前举例 ID 是 button1。
6. 在打印 js 方法中隐藏元素 ID。
export default async function({event, data}) { console.log('打印', event, data) /**把内容转换成图片格式进行打印 */ await new Promise((resolve,reject) => { const s = document.createElement('script') s.src= 'https://html2canvas.hertzen.com/dist/html2canvas.min.js' s.onload = resolve s.onerror = reject document.head.appendChild(s) }) const element = document.querySelector(`#root`) // 选择到要打印的组件id或者class，转换为canvas，其中 idXXX 表示要打印的元素 const hide_element = element.querySelector(`#button1`);// 选择要隐藏的元素，其中 idXXX 表示要隐藏的元素 hide_element.style.visibility = 'hidden' if(!element) { throw new Error('要打印的内容不存在') } const { width, height } = element.getBoundingClientRect() const canvas = await window.html2canvas(element) // 打印 let winPrint = window.open('', '', `left=0,top=0,width=${width},height=${height},toolbar=0,scrollbars=0,status=0`); winPrint.document.body.appendChild(canvas); winPrint.document.close(); winPrint.focus(); winPrint.print(); hide_element.style.visibility = 'visible';// 恢复被隐藏的元素 ，其中 idXXX 表示要隐藏的元素 winPrint.close();}
7. 保存以后，回到表单页面，选择打印，如下实现打印。
二、场景二：打印场景中包含图片
1. 在编辑器中新建弹窗组件，弹窗底部按钮调用 自定义 Javascript 事件。
2. 自定义事件代码如下。
3. 需要隐藏打印页面中的多余元素。
4. 自定义打印代码样式。
4.1 前往代码编辑器。
4.2 在 style 文件中编写打印样式。
样式代码如下，其中 .wd-comp-id-button3 和 .wd-comp-id-icon1 为需要隐藏元素的 class 名称。
@media print { @page { /* 去除页眉 */ /* margin-top: 0; */ /* 去除页脚 */ /* margin-bottom: 0; */ /* 去掉页眉和页脚 */ margin: 0; /* 纵向 */ size: portrait; /* 横向 A4 */ size: A4 landscape; } .wd-comp-id-button3 {//需要隐藏的元素 display: none; } .wd-comp-id-icon1 {//需要隐藏的元素 display: none; }}
5. 打印效果预览。