一、问题描述

我做的项目技术栈是由vue3+element Plus+vite构成，我需要勾选表格复选框然后调取浏览器打印，然后进行批量打印,如下图

二、技术选型

1.LODOP打印控件进行批量打印(不符合要求)：因为根据我之前经验来说这个相对来说比较符合要求，而且还可以静默打印，但是需要安装程序，而且还有水印需要付费后才能没有水印，所以pass掉，客户不想装程序而且不想花钱懂得都懂！

2.vue-print-nb插件：最后选的这个插件，vue3插件vue3-print-nb

①.使用步骤

1.安装依赖：npm install vue3-print-nb --save

2.在main.js中引入

import print from 'vue3-print-nb'; //打印插件

3.在组件的打印区域标签上加 id="printArea"

<div id="printArea"> 打印区域 <div>

4.在组件的打印按钮标签上使用指令 v-print="print",print是配置对象

print: {
        id: 'printArea',
        popTitle: '打印', // 打印配置页上方标题
        extraHead: '', //最上方的头部文字，附加在head标签上的额外标签,使用逗号分隔
        preview: '', // 是否启动预览模式，默认是false（开启预览模式，可以先预览后打印）
        previewTitle: '', // 打印预览的标题（开启预览模式后出现）,
        previewPrintBtnLabel: '', // 打印预览的标题的下方按钮文本，点击可进入打印（开启预览模式后出现）
        zIndex: '', // 预览的窗口的z-index，默认是 20002（此值要高一些，这涉及到预览模式是否显示在最上面）   
        previewBeforeOpenCallback() {}, //预览窗口打开之前的callback（开启预览模式调用）
        previewOpenCallback() {}, // 预览窗口打开之后的callback（开启预览模式调用）
        beforeOpenCallback() {}, // 开启打印前的回调事件
        openCallback() {}, // 调用打印之后的回调事件
        closeCallback() {}, //关闭打印的回调事件（无法确定点击的是确认还是取消）
      },

②配置完以上步骤后，虽然可以实现打印了但还不是批量的，我就再想如何进行批量打印。首先想到的是for循环，但是写了之后发现每次都会弹出一次浏览器打印的弹窗，浏览器打印的弹窗真的很让人头疼，无法进行控制。于是突发奇想是不是可以把需要批量打印的数据进行分页。这样就可以弹出一次框，还可以批量打印。心动不如行动，于是我去网上找，功夫不负有心人居然真的有控制打印分页的，如下:

1.有一个css属性可以控制打印分页位置如下：

@media print {
    .print-page {
        page-break-after: always;
    }
}

一定要加@media print里面包着

2.具体代码如下：

记住上面说不要用绝对定位，具体会不会出问题我也没有尝试，我是在觉得定位里面又包了个相对定位 2.还有其他属性具体根据自己需求了，例如

三、总结

怎么说呢！个人不建议使用vue3-print-nb，开始我觉得用插件方便点，其实并没有方便很多，建议使用原生获取dom进行打印，可以控制点击事件，这个插件的事件并不好用，真心的！而且对比起来原生的不用担心兼容问题，不过我已经实现了也不会再去改了哈哈哈哈，懂得都懂。希望这篇文章可以帮助到大家，有问题欢迎大家评论~

让人意想不到的前端批量打印，vue批量打印，打印分页

一、问题描述

二、技术选型

①.使用步骤

三、总结