vue项目中借助vue-print-nb插件实现打印

需求：打印页面部分内容

插件原理：创建iframe，获取要打印的内容添加到iframe中，调用print()方法打印

使用：

一、安装插件

npm install vue-print-nb --save

二、页面上导入并注册

// 导入插件
import Print from "vue-print-nb";
export default {
  // 注册指令
  directives: {
    Print,
  },
}

三、提供容器并添加id

四、给按钮添加v-print指令，并在data中定义

示例代码：

<template>
  <div class="box">
    <div class="title">vue-print-nb打印插件的使用</div>
    <div class="print_box" id="printf_box">
      <div class="title_infor">基本信息</div>
      <div class="receive">
        <div class="left_receive">
          <div class="txt">收</div>
        </div>
        <div class="right_receive">
          <div class="infor">收件人࿱