Vue PC端项目,使用组件vue-print-nb，实现打印功能

Vue PC端项目,使用组件vue-print-nb，实现打印功能

实现效果

1. package.json 文件中，dependencies 中增加组件

"vue-print-nb": "^1.7.5"

2. main.js中全局注册，若不需要全局注册可省略

//打印组件
import Print from 'vue-print-nb'
Vue.use(Print)

3. 在需要使用的地方增加打印按钮

        <el-button
          size="mini"
          class="bp-primary-plain"
          type="primary"
          plain
          icon="el-icon-printer"
          @click="printDeliver"
        >打印
        </el-button>

4. 打印组件

<template>
  <el-dialog
    title="标题"
    :visible.sync="visible"
    width="900px"
  >
    <div id="printArea">
      <div style="width:100%;height:auto;">
        <div class="titleBoxOne">表单名称</div>
        <div class="headBox">
          <table class="gridtable">
            <tr>
			<!--  colspan:行合并  rowspan：列合并           -->
              <td colspan="2">列1:{{ reportData.column1 }}</td>
              <td colspan="2"> 列2:{{ reportData.column2 }}</td>
              <td rowspan="3">二维码</td>
            </tr>
            <tr>
              <td colspan="2">打印时间:{{ reportData.printTime }}</td>
              <td colspan="2">XXX:</td>
            </tr>
            <tr>
              <td colspan="2">XXX:</td>
              <td colspan="2">XXX:</td>
            </tr>
            <tr>
              <th>XXX</th>
              <th>XXX</th>
              <th>XXX</th>
              <th colspan="2">备注</th>
            </tr>
			<!-- 循环渲染列表数据  -->
            <template v-for="data in reportData.list">
              <tr>
                <td>{{ data.1 }}</td>
                <td>{{ data.2 }}</td>
                <td>{{ data.3 }}</td>
                <td colspan="2">{{ data.4 }}</td>
              </tr>
            </template>
          </table>
        </div>
        <div class="footerBox">
          <span>合计数:{{ reportData.1 }} </span>
          <span>合计数:{{ reportData.1 }} </span>
          <span>合计数:{{ reportData.1 }} </span>
        </div>
      </div>
    </div>
    <template slot="footer">
      <el-button type="primary" v-print="print">打印</el-button>
      <el-button @click="handleCancel()">关闭</el-button>
    </template>
  </el-dialog>
</template>
import QRCode from "qrcodejs2";
<script>
export default {
  name: 'printModal',
  data() {
    return {
      exportData: "",
      reportData: '',
      visible: false,
      title: '表头',
      print: {
        id: 'printArea',
        // popTitle: '配置页眉标题', // 打印配置页上方的标题
        // extraHead: '打印', // 最上方的头部文字，附加在head标签上的额外标签，使用逗号分割
        preview: false, // 是否启动预览模式，默认是false
        previewTitle: '标题', // 打印预览的标题
        previewPrintBtnLabel: '预览完毕,开始打印', // 打印预览的标题下方的按钮文本，点击可进入打印
        zIndex: 20002, // 预览窗口的z-index，默认是20002，最好比默认值更高
        standard: '',
        extarCss: ''
      }
    };
  },
  methods: {
    show(data) {
      this.visible = true;
      this.loadData(data);
      this.creatQrCode(data);
    },
    close() {
      this.visible = false;
    },
    handleCancel() {
      this.close();
    },
    loadData(data) {
	  //加载数据，注意换接口
      this.$get('xxxxx?no=' + data).then(res => {
        if (res.success) {
          this.reportData = res.result;
        }
      });
    }
  }
};
</script>

<style scoped lang='scss'>

@media print {
  table {
    height: inherit;
  }
}

.titleBoxOne {
  font-size: 22px;
  font-weight: 500;
  text-align: center;
  margin-bottom: 20px;
  color: #000;
}

.footerBox {
  margin-top: 10px;
  width: 90%;
  text-align: right;
  color: #000;
}

table.gridtable {
  font-family: verdana, arial, sans-serif;
  font-size: 11px;
  color: #333333;
  border-width: 1px;
  border-color: #666666;
  border-collapse: collapse;
  width: 95%;
}

table.gridtable th {
  border-width: 1px;
  padding: 8px;
  border-style: solid;
  border-color: #666666;
  width: 15%;
}

table.gridtable td {
  border-width: 1px;
  padding: 8px;
  border-style: solid;
  border-color: #666666;
  background-color: #ffffff;
  width: 10%;
}
</style>

5. 引打印组件，并注册

需要注意的地方，代码如下：

<template>
  <div class="app-container">
    <el-row :gutter="10" class="mb10">
      <el-col :span="1.5">
        <el-button
          size="mini"
          class="bp-primary-plain"
          type="primary"
          plain
          icon="el-icon-printer"
          @click="printDeliver(111)"
        >打印
        </el-button>
      </el-col>
    </el-row>

    <!-- 打印    -->
    <printModal ref="printModal"></printModal>
  </div>
</template>

<script>

import printModal from "./printModal";
export default {
  components: {
    printModal
  },
  data() {
    return {
  },
  methods: {
    //打印
    print(data) {
      this.$refs.printModal.show(data);
    },
  },
};
</script>
<style lang="scss" scoped>
</style>

    

6. 大功告成，庆祝一下，对自己说声辛苦啦

 .*.    /~ .~\    /~  ~\    /~ .~\    /~  ~\
 ***   '      `\/'      *  '      `\/'      *
  V   (                .*)(               . *)
/\|/\  \            . *./  \            . *./
  |     `\ .      . .*/'    `\ .      . .*/'
  |       `\ * .*. */' _    _ `\ * .*. */'
            `\ * */'  ( `\/'*)  `\ * */'
              `\/'     \   */'    `\/'
                        `\/'