vue2中Print.js的使用超详细讲解（pdf、html、json、image）

npm install print-js --save

import printJS from "print-js";

 <a-button
      class="not-print"
      @click="handlePrint"
      type="primary"
      style="margin-top: 20px"
      >打印</a-button
    >

 handlePrint(data = this.data) {
        console.log(data);
      printJS({
        // header: '表格标题',
        type: "json",
        properties: [
          { field: "age", displayName: "年龄" },
          { field: "name", displayName: "姓名" },
          { field: "address", displayName: "地址" },
        ],
        printable: data,
        // gridHeaderStyle: 'color: red;  border: 2px solid #3971A5;',
        // gridStyle: 'border: 2px solid #3971A5;'
        header: `<h3 class="custom-h3">${this.title}</h3>`,
        style: ".custom-h3 { color: red;text-align:center}",
      });
    },

 printJS({printable: 'images/print-01-highres.jpg', type: 'image', header: 'My image header'})

 <button type="button" onclick="printJS('docs/printjs.pdf')">
    Print PDF
 </button>

 <button type="button" onclick="printJS({printable: base64, type: 'pdf', base64: true})">
    Print PDF with Message
 </button>

<button type="button" onclick="printJS({ printable: 'printJS-form', type: 'html', header: 'PrintJS - Form Element Selection' })">
    Print Form with Header
 </button>

<a-drawer title="Basic Drawer" placement="right" :closable="false" :visible="visibleD"
      :after-visible-change="afterVisibleChange" @close="onClose" width="50%" :maskClosable="true">
      <div id="basic">
        <div v-for="item in 4">
          <a-card hoverable style="width: 240px">
            <img slot="cover" alt="example" src="https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png" />
            <a-card-meta title="Europe Street beat">
              <template slot="description">
                www.instagram.com
              </template>
            </a-card-meta>
          </a-card>
        </div>
      </div>
      <div>
        <a-button @click="printSure">确定打印</a-button>
      </div>
    </a-drawer>