关于数据列表中单条数据的打印

问题

在数据列表里，数据是一条一条循环出来的，如果我们想实现打印单条数据，打印出来的每条数据都是相同的

描述

页面布局大致如下：

页面上添加了一个打印按钮，微搭本地不提供打印功能，打印功能的实现是调用了一个print自定义方法，打印指定的容器container1

自定义的print方法：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
export default async function({event, data}) {
  console.log('data.target',data.target)
const element = document.querySelector(`#container1`) // 选择到要打印的组件id或者class，转换为canvas，其中 idXXX 表示要打印的元素
  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();
  winPrint.close();
}

因为打印的数据是循环出来的，当我们点击打印按钮时，

此时我们点击的是第二条数据，但是在打印预览页展示的还是第一条数据信息。

同样的，无论我们点击哪一条数据的打印，打印预览页都是第一条的信息，所以我们无法直接在数据列表内实现打印不同数据的功能。

总结

目前的解决办法是新建一个页面，跳转到新页面传递参数，新页面内只展示单条数据，在新页面内打印。但是这种办法还需要跳转页面，操作上不够简便。

继上述说明后，

想要实现打印单条不同数据，总结了一种新的办法，可以实现在当前页面打印单条不同数据，详细说明如下：

  • 调用 print 自定义方法时，传入参数列表下标、print 方法中，通过 data.target 获取当前点击项的下标 i
  • 获取所有列表dom元素，const list = document.querySelectorAll('#root .weda-list-view__content > .weda-ui')
  • list[i] 就指向打印的那条数据，而不是第一条元素