Vue 批量打印 HTML 文档 - 轻松实现多文档打印

要实现批量打印 HTML 文档，可以使用 Vue 的打印功能以及一些 JavaScript 的辅助方法来实现。

首先，你需要在 Vue 组件中添加一个按钮或其他触发打印事件的元素。例如，可以在模板中添加一个按钮：

<template>
  <div>
    <button @click="printDocuments">打印文档</button>
  </div>
</template>

然后，在 Vue 组件的方法中添加打印功能。可以使用 window.print() 方法来触发浏览器的打印功能。但是，这将只打印当前页面的内容。

如果你想要批量打印多个 HTML 文档，你可以使用 JavaScript 的 window.open() 方法打开每个文档，并在打开的窗口中调用 window.print() 方法。

以下是一个简单的示例代码：

methods: {
  printDocuments() {
    const urls = ['document1.html', 'document2.html', 'document3.html']; // 要打印的 HTML 文档的 URL 列表
    urls.forEach(url => {
      const newWindow = window.open(url); // 在新窗口中打开文档
      newWindow.onload = () => {
        newWindow.print(); // 调用打印功能
        newWindow.close(); // 关闭窗口
      };
    });
  }
}

这样，当用户点击“打印文档”按钮时，将会依次打开每个 HTML 文档并打印。

请注意，由于浏览器的安全策略限制，在某些情况下，可能无法在新窗口中打开 HTML 文档。在这种情况下，你可能需要考虑其他方法，例如使用服务器端生成 PDF 文件，然后批量打印 PDF 文件。