vue-print-nb 批量打印url

vue-print-nb是一个Vue.js的插件，用于在浏览器中打印指定的内容。它可以通过配置参数来实现批量打印URL。

以下是使用vue-print-nb批量打印URL的步骤：

1. 在终端中执行以下命令安装vue-print-nb插件：

npm i vue-print-nb

2. 在main.js文件中全局引入vue-print-nb插件：

import Print from 'vue-print-nb';
Vue.use(Print);

3. 在Vue组件中，使用v-for指令循环生成多个包含URL的元素，例如：

<template>
  <div>
    <div v-for="(url, index) in urlList" :key="index">
      <img :src="url" style="width: 100px; height: 100px">
    </div>
    <el-button @click="printUrls">打印</el-button>
  </div>
</template>

4. 在Vue组件的data中定义urlList数组，用于存储要打印的URL列表：

data() {
  return {
    urlList: [
      'https://example.com/image1.jpg',
      'https://example.com/image2.jpg',
      'https://example.com/image3.jpg'
    ]
  }
}

5. 在Vue组件的methods中定义printUrls方法，用于触发打印操作：

methods: {
  printUrls() {
    this.$print({
      ids: this.urlList.map((url, index) => `imagePrint${index}`),
      popTitle: "批量打印URL"
    });
  }
}

在上述代码中，我们使用v-for指令循环生成多个包含URL的div元素，并为每个div元素设置了一个唯一的id（例如imagePrint0、imagePrint1、imagePrint2）。然后，在printUrls方法中，我们通过this.$print方法调用vue-print-nb插件的打印功能，传递了要打印的元素的id列表和打印配置参数。

这样，当点击"打印"按钮时，vue-print-nb插件会将指定的URL批量打印出来。