腾讯云微搭低代码低代码自定义 JS 方法实现页面打印-最佳实践-腾讯云

如果用户要实现页面表单或列表打印时，可以通过低代码自定义 JS 方法把要打印的内容转换成图片，然后使用 window.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();
}
最佳实践案例
场景一：打印场景中不包含图片
1. 创建空白页面，加入文本组件，文本内容为合同打印。
?
?
?
2. 增加表单容器组件，绑定任意有字段的数据源（数据模型的新建可以参考操作指南中数据源相关内容）。
?
?
?
3. 增加按钮组件，命名打印。
?
?
?
4. 给打印按钮添加点击事件。
?
?
?
5. 打开低码编辑器，在自定义方法 print 中拷贝上面的核心代码。
?
?
?
6. 打开调试工具，找出到打印区域 div 的 ID，当前举例 ID 是 root。
?
?
?
7. 如果希望在打印的时候不显示提交、打印按钮，可以找出这两组按钮 div 的 ID，当前举例 ID 是 id92。
?
?
?
8. 在代码编辑器中添加打印区域 ID 和隐藏区域 ID。
?
?
?
9. 保存以后，回到表单页面，选择打印，如下图实现打印。
?
?
?
场景二：打印场景中包含图片
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. 打印效果预览。
?
?
?
低代码自定义 JS 方法实现页面打印

本页目录：

核心代码如下

最佳实践案例

场景一：打印场景中不包含图片

场景二：打印场景中包含图片
