Vue 實現打印功能

Vue 實現 print

第一步 安裝組件

//安裝print-js
npm install vue-print-nb --save

第二步 在 main.js 全局引入

// 引入下載的print
import print from 'vue-print-nb'
// 全局使用
Vue.use(print);

第三步 使用

<template>
  <div>
    <div class="table">
      <p class="title">統計圖表</p>
      <el-table :data="tableData" border id="printContainer">
        <el-table-column prop="name" label="姓名"></el-table-column>
        <el-table-column prop="happy" label="愛好"></el-table-column>
      </el-table>
    </div>
    <el-button type="primary" v-show="showbutton" v-print="printObj" @click="printButton">打印</el-button>
  </div>
</template>
<script>
export default {
  data() {
    return {
      tableData: [
        {
          name: "王小虎",
          happy: "王小鹵虎皮鳳爪",
          status: 0
        },
        {
          name: "王小虎",
          happy: "王小鹵虎皮鳳爪",
          status: 1
        },
        {
          name: "王小虎",
          happy: "王小鹵虎皮鳳爪",
          status: 0
        },
        {
          name: "王小虎",
          happy: "王小鹵虎皮鳳爪",
          status: 1
        }
      ],
      showbutton: true, //打印按鈕顯示
      printObj: {
        printable: "printContainer", // 標簽元素id
        type: "html",
        header: "",
        targetStyles: ["*"],
        style: "@page {margin:0mm 10mm};", //控制頁眉頁尾間距
        extraHead: '<meta http-equiv="Content-Language"content="zh-cn"/>'
      }
    };
  },
  mounted() {
    console.log(this.$route.params.userId);
  },
  methods: {
    printButton() {
      this.showbutton = false;
    }
  }
};
</script>
<style scoped>
#printContainer {
  width: 100%;
}
#printContainer .el-table {
  align-content: center;
}
.table {
  display: flex;
  justify-content: center;
  flex-direction: column;
}
.title {
  text-align: center;
  padding: 20px 0px;
}
@page {
  size: auto A4 landscape;
  margin: 3mm;
}
</style>