Vue3+vue3-print-nb 实现分页打印功能

1、安装vue-print-nb

Vue2.0版本安装方法：
npm install vue-print-nb --save

Vue3.0版本安装方法：
npm install vue3-print-nb --save

2、引入Vue项目

Vue2.0引入方式：

// 1. 全局挂载
import Print from 'vue-print-nb'
Vue.use(Print)

// 2. 自定义指令
import print from 'vue-print-nb'
directives: {
  print
}

Vue3.0引入方式：

// 1. 全局挂载
import { createApp } from 'vue'
import App from './App.vue'
import print from 'vue3-print-nb'
const app = createApp(App)
app.use(print)
app.mount('#app')

 
// 2. 自定义指令
import print from 'vue3-print-nb'
 
directives: {
    print   
}

3、在组件中使用

注意：一定要给需要打印的容器加一个id,点击打印按钮的时候调用传入的id

 <t-button v-print="printContent">打印</t-button>
        <div style="display: none">
          <div id="printDiv">
            <div v-for="(item, index) in aaa" :key="index" style="page-break-after: always; color: #000">
              <div style="text-align: center; margin: 40px 0 20px 0; font-size: 30px">
                服务确认表
              </div>
              <div style="border: 1px solid #000; margin: 0 auto; margin-top: 20px">
                <div style="width: 100%; display: flex; border-bottom: 1px solid #000">
                  <div style="width: 45%; padding: 5px 5px; border-right: 1px solid #000">
                    参保人姓名：{{ item?.name || 'hhh' }}
                  </div>
                  <div style="padding: 5px 5px">参保人身份证号：{{ item.id_card }}</div>
                </div>
                <div style="padding: 5px 5px; border-bottom: 1px solid #000">
                  辅具类定点服务机构：
                </div>
                <div style="padding: 5px 5px; text-align: center; border-bottom: 1px solid #000">辅具服务确认</div>
                <div style="display: flex; border-bottom: 1px solid #000">
                  <div class="classifier">
                    类别：
                    <p><t-checkbox />初次配置</p>
                    <p><t-checkbox />续租</p>
                    <p><t-checkbox />续买</p>
                    <p><t-checkbox />恢复服务</p>
                  </div>
                  <div style="width: 80%">
                    <div v-for="(good_item, good_index) in goods_List" :key="good_index" style="padding: 5px 5px">
                      <div style="vertical-align: bottom; display: flex; flex-wrap: wrap; padding: 4px 0">
                        <t-checkbox />{{ `${good_index + 1}、${good_item.good_name}；` }}生产厂家：
                        <div class="goods_item"></div>
                        ;品牌名称：
                        <div class="goods_item"></div>
                        ;型号：
                        <div class="goods_item"></div>
                        ;使用期限：
                        <div class="goods_item"></div>
                        <div v-if="good_item.goods_type == 2" style="display: flex">
                          ;数量：
                          <div class="goods_item"></div>
                        </div>
                      </div>
                    </div>
                    <div style="padding: 5px 5px">
                      共确认
                      <span style="text-decoration: underline">
                        {{ goods_List.length }}
                      </span>
                      类
                    </div>
                  </div>
                </div>
                <div class="aaa">
                  <div class="item"><t-checkbox /> 已安装</div>
                  <div style="padding: 5px 5px"><t-checkbox />已进行使用指导</div>
                </div>
                <div class="aaa">
                  <div class="item">工作人员：</div>
                  <div style="padding: 5px 5px">送到日期:</div>
                </div>
                <div class="aaa">
                  <div class="item">参保人员或代理人签字确认:</div>
                  <div style="padding: 5px 5px">安装日期:</div>
                </div>
                <div style="padding: 5px 5px">
                  使用此表进行辅具器具初次配置、续租、续买、暂停后恢复服务的辅具器具配置确认
                </div>
              </div>
            </div>
          </div>
        </div>

const printContent = ref({
  id: 'printDiv',
  // preview: true, // 预览工具是否启用
  // previewTitle: '', // 预览页面的标题
  popTitle: '', // 打印页面的页眉
});
const aaa = ref([
  { name: '肖1', id_card: '111' },
  { name: '肖2', id_card: '222' },
  { name: '肖3', id_card: '333' },
]);
const goods_List = ref([
  { good_name: '电动护理床', good_num: 1, goods_type: 1 },
  { good_name: '手动轮椅车', good_num: 1, goods_type: 1 },
  { good_name: '浴厕轮椅', good_num: 1, goods_type: 1 },
  { good_name: '坐便椅', good_num: 2, goods_type: 1 },
  { good_name: '助行器', good_num: 1, goods_type: 1 },
  { good_name: '充气防褥疮床垫', good_num: 1, goods_type: 1 },
  { good_name: '三角垫、看护垫', good_num: 1, goods_type: 1 },
  { good_name: '成人纸尿裤', good_num: 2, goods_type: 2 },
  { good_name: '护理垫', good_num: 2, goods_type: 2 },
]);

4、vue-print-nb插件优化

1.去掉页眉页脚

<style lang="scss" scoped>
@page {
    size: auto;
    margin: 0mm;
  }
</style>

2.打印內容不自动换行问题
只需要给不自动换行的标签加上 word-wrap:break-word; 即可。

<style lang="scss" scoped>
  .procedure{
      word-wrap:break-word;
   }
</style>

3. 样式布局不生效问题

<style lang="scss">
@media print { 
  //样式写在这里面
}
 .title {
   word-wrap:break-word; //内容不自动换行问题
  }
</style>

样式图：