vue print-js实现打印功能

vue print-js实现打印功能

1. 使用npm安装print插件

npm install print-js --save

2. 在需要的文件里面引入 import Print from ‘print-js’
3. 在页面调用打印

<template>
  <div>
    <el-button @click="printInfo">打印</el-button>
    <div id="printBox" class="wrap-style" style="" v-show="printFlag">
      <div class="print-header">
        <div class="left-content" style="font-weight: 600;">
          <!-- 左侧内容，可以是文字或图片 -->
          信息
        </div>
        <div class="right-content" style="font-weight: 600;">
          <!-- 右侧内容，可以是文字或图片 -->
          <img src="@/assets/avature.png" alt="" />
        </div>
      </div>
      <div class="user-box">
        用户名：xxx 139xxxxxxxx
      </div>
      <div
        class="title"
        style="width: 100%; font-weight:600;font-size: 1.5em;text-align:center;margin-top: 10px;"
      >
        用户列表
      </div>
      <div class="info-box">
        <div style="font-size: 0.875em;">
          <span style="font-weight: 600;">打印日期：</span
          >{{ transDate(printMsg.date) }}
        </div>
      </div>
      <table
        border
        cellspacing="0"
        width="100%"
        style="margin-top:0;color:#000;border-color:#000;font-size: 0.875em;"
      >
        <tr>
          <td style="padding: 5px 2px;" width="40" align="center">序号</td>
          <td style="padding: 5px 10px;" width="165" align="center">
            用户名
          </td>
          <td style="padding: 5px 10px;" width="100" align="center">手机号</td>
          <td style="padding: 5px 2px;" width="40" align="center">昵称</td>
          <td style="padding: 5px 2px;" width="40" align="center">性别</td>
          <td style="padding: 5px 10px;" align="center">详细信息</td>
        </tr>
        <tr v-for="(item, index) in printTableData" :key="index">
          <td style="padding: 5px 10px;" align="center">{{ index + 1 }}</td>
          <td style="padding: 5px 10px;">{{ item.name }}</td>
          <td style="padding: 5px 10px;" align="center">
            {{ item.mobile }}
          </td>
          <td style="padding: 5px 10px;" align="center">{{ item.nickName }}</td>
          <td style="padding: 5px 10px;" align="center">{{ item.sex }}</td>
          <td style="padding: 5px 10px;">{{ item.detail }}</td>
        </tr>
        <tr>
          <td colspan="2" align="center" style="font-weight: 600;">总数</td>
          <td></td>
          <td style="padding: 5px 10px;font-weight: 600;" align="center">
            {{ printMsg.total }}
          </td>
          <td></td>
          <td></td>
        </tr>
      </table>
    </div>
  </div>

</template>
<script>
import print from "print-js";
export default {
    data() {
        return {
            printFlag: false,
            printMsg: {},
            printTableData:[],
            printTimeout: null,
            printInterval: null
        }
    },
    methods:{
       async printInfo() {
            this.printFlag = true;
            let result = await getUserList();

            this.printMsg = result || {};
            let data = this.printMsg.items || [];
            this.printTableData = [];
            data.forEach(el => {
                this.printTableData.push({
                id: el.id,
                name: el.name,
                mobile: el.mobile,
                sex: el.sex,
                nickName: el.nickName,
                detial: el.detail
                });
            });
            this.printTimeout = setTimeout(() => {
                this.printInterval = setInterval(
                () => window.dispatchEvent(new Event("focus")),
                500
                );
                
                print({
                printable: "printBox",
                type: "html",
                style:
                    ".print-header {\n" +
                    "    display: flex;\n" +
                    "     border-bottom: 1px solid #000;\n" +
                    "     align-items: center;\n" +
                    "     height: 45px;\n" +
                    "    justify-content: space-between;\n" +
                    "  }\n" +
                    "\n" +
                    "  .left-content {\n" +
                    "    color: #000;\n" +
                    "    height: 100%;\n" +
                    "    display: flex;\n" +
                    "     align-items: center;\n" +
                    "    font-size: 0.875em;\n" +
                    "  }\n" +
                    "\n" +
                    "  .right-content {\n" +
                    "    width: 74px;\n" +
                    "    height: 30px;\n" +
                    "  }" +
                    "  .right-content img {\n" +
                    "    width: 100%;\n" +
                    "    height: 100%;\n" +
                    "  }" +
                    "  .user-box {\n" +
                    "    font-size: 0.875em;\n" +
                    "    color: #000;\n" +
                    "    font-weight: 600;\n" +
                    "    margin-top: 10px;\n" +
                    "  }" +
                    "  .info-box {\n" +
                    "    font-size: 0.875em;\n" +
                    "    color: #000;\n" +
                    "    display: flex;\n" +
                    "    margin-top: 10px;\n" +
                    "    margin-bottom: 10px;\n" +
                    "    justify-content: space-between;\n" +
                    "  }" +
                    "  .info-box.final {\n" +
                    "    font-size: 0.875em;\n" +
                    "    color: #000;\n" +
                    "    display: flex;\n" +
                    "    margin-top: 10px;\n" +
                    "    justify-content: space-between;\n" +
                    "  }" +
                    "  .main-info-box {\n" +
                    "    font-size: 0.875em;\n" +
                    "    color: #000;\n" +
                    "    border: 1px solid #000;\n" +
                    "    padding: 10px;\n" +
                    "    border-bottom: 0;\n" +
                    "  }" +
                    "  table td {\n" +
                    "    font-size: 0.875em;\n" +
                    "    color: #000;\n" +
                    "    border: 1px solid #000;\n" +
                    "  }" +
                    "table { page-break-inside:auto;border-collapse: collapse; }\n" +
                    "       tr { page-break-inside:avoid; page-break-after:auto; }" +
                    "@page {\n" +
                    "  margin: 0mm 10mm;\n" +
                    "}",
                scanStyles: false,
                // targetStyles: ['*'],
                maxWidth: 754,
                onPrintDialogClose: () => {
                    clearInterval(this.printInterval);
                    console.log("关闭");
                    this.printFlag = false;
                }
                });
            }, 500);
    },
    },
     beforeDestroy() {
        this.printTimeout && clearTimeout(this.printTimeout);
        this.printInterval && clearInterval(this.printInterval);
  }
}
</script>
<style lang="scss" scoped>
.wrap-style {
  width: 754px;
}
</style>