[Ques]: 请问下 如果我需要重复打印一个组件的不同数据，应该怎么去配置呢

[youjunxiaji]

Describe the Question / 问题描述

我对前端不是很深入 我有这样的一个需求 我需要把数据不断的传给子组件

然后再去打印 我是否可以做到批量打印呢 每个打印的页面都是基于我渲染的不同数据

[Alessandro-Pang]

很抱歉，这两天实在有点忙，顾不上回复。

首先，你说的这个严格意义上讲是无法实现的，前端受限于浏览器的打印 API，无法实现批量打印，准确的来讲是无法实现静默打印，如果打印必然要唤起浏览器的打印预览窗口。

但是折中方案也是有的，可以直接在递归中套用打印，每次渲染完新的数据就执行打印，但是非常不建议这么做，因为浏览器的打印窗口会阻塞浏览器的运行，所以当你循环打印时，会导致用户只能一个个手动关闭打印窗口之后才能进行操作，这个阶段不能切换窗口，甚至无法关闭浏览器。

下面是一个简单的循环打印示例代码，实现了循环打印四次不同的 table 数据

let tag = 0;
function loopPrint() {
  if (tag === 4) return;
  tableData.value.splice(0);
  mockTableData(100);
  new VuePrintNext({
    el: 'table',
    closeCallback: () => {
      tag++;
      loopPrint();
    },
  });
}

[youjunxiaji]

很抱歉，这两天实在有点忙，顾不上回复。

首先，你说的这个严格意义上讲是无法实现的，前端受限于浏览器的打印 API，无法实现批量打印，准确的来讲是无法实现静默打印，如果打印必然要唤起浏览器的打印预览窗口。

但是折中方案也是有的，可以直接在递归中套用打印，每次渲染完新的数据就执行打印，但是非常不建议这么做，因为浏览器的打印窗口会阻塞浏览器的运行，所以当你循环打印时，会导致用户只能一个个手动关闭打印窗口之后才能进行操作，这个阶段不能切换窗口，甚至无法关闭浏览器。

下面是一个简单的循环打印示例代码，实现了循环打印四次不同的 table 数据

let tag = 0;
function loopPrint() {
if (tag === 4) return;
tableData.value.splice(0);
mockTableData(100);
new VuePrintNext({
el: 'table',
closeCallback: () => {
tag++;
loopPrint();
},
});
}

感谢回答 我在想是否用v-for包裹组件比较好 然后把ref写在v-for父层 让vue-print-next自动分页打印是不是好一些

[Alessandro-Pang]

如果是分页的话肯定是好一些的。