Vue+elemnet UI table表格使用print.js打印_vue3 print-js 打印table 线

1.npm 安装priint.js

2.vue页面引用

import * as Printjs from "print-js";

3.

<el-table
        id="printCons"
        :data="tableData"
        stripe
        style="width: 100%; margin-top: 30px"
        border
        v-loading="loading"
      >
        <el-table-column prop="locationNumber" :label="$t('table.location')">
        </el-table-column>
 
.............省略
 
//打印按钮
 <button class="btn_screen" @click="goPrint">打印</button>

4.

goPrint() {
      console.log("打印");
      Printjs({
        printable: "printCons", //要打印内容的id
        type: "html", 
        header:"库存明细",
        headerStyle: 'text-align:center;color:#000;width:100%;border:1px #000 solid;',
        scanStyles: false,
        style: 'table{table-layout: fixed;border-collapse:collapse;} table tr td,th { padding:15px;border:1px #000 solid; white-space:normal;word-break:break-all; text-align:center}' // 表格样式
      });
    },