一种批量打印列表详情的方式

在后台系统中，数据通常以列表形式展示，有时候需要实现批量打印的需求，如果要实现批量打印，可以采用以下方式

1.假设列表页是这个样子

2.详情页长这样

3.让后端整出一个批量查询的接口，返回内容为

data:[
    {
      url: '头像url',
      date: '时间',
      name: '姓名',
      addres: '地址信息'
    },
    ...勾选几个有几个
]

4.在列表当前页搞一个容器，内容为第3步数据详情的集合体，长这个样子

5.给第4步容器加上一个div，设置属性为代码片段所示，这样容器就被隐藏了

<div style="height: 0;overflow: hidden;">
    （第四步容器）
</div>

6.如果希望每条数据的详情分页展示，那么需要在每一个详情信息div上加上page-break-after: always,该属性是用来给页面打印时设置分页符

<div style="page-break-after: always"></div>

7.引入打印插件vue3-print-nb

安装插件
npm install vue3-print-nb --save

使用插件
import App from './App.vue'
import Print from 'vue3-print-nb'
const app = createApp(App)
app.use(Print)

给第4步容器设置id作为打印使用
<div id="printRef"></div>

批量打印按钮加上以下属性
<el-button v-print="'#printRef'">批量打印</el-button>

总结：实现原理为将需要打印的详情信息通过后端的组合接口，全部渲染在当前列表页面，然后给其设置height: 0;overflow: hidden;隐藏起来，结合vue3-print-nb打印插件，局部打印隐藏的详情信息div。