如果用户要实现页面表单或列表打印时,可以通过低代码自定义 JS 方法把要打印的内容转换成图片,然后使用
window.print()
方法进行页面打印。最佳实践案例
场景一:打印场景中不包含图片
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 = resolves.onerror = rejectdocument.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 = resolves.onerror = rejectdocument.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. 打印效果预览。