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

概要

前端实现打印（包含pdf、html、json、image）

安装

npm install print-js --save

JSON使用

在项目vue文件中引入

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}",
      });
    },

type：类型（可以是html pdf image json）

properties：配置json相关的内容（filed要跟json的字段必须一样！！！）

displayName：就是表格的表头信息

printable：需要打印的数据

header：可以在表格上方增加一个类似标题信息

style：配置样式

图片使用

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

配置都是类似的，单张写图片路径，多张写成数组就可以了

Pdf使用

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

还可以为base64格式

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

最实用的来了

        小编在工作需求中是遇到了打印各种混合的类型，比如说一个表格里面有图片，其他信息等。因为图片是后端返回来的链接，一开始用JSON格式打印出来是表格的形式，图片这一块就是个链接地址，并没有跟我们想的一样是图片

        后来参考Print.js的官网，研究了一下，发现以html形式打印，它会将你整个页面打印出来。这才是我们想要的格式

Print.js官网：

Print.js官网：https://printjs.crabbly.com/

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

注意此时的printable配置不再是跟JSON、image一样的数据了。这里需要的是一个唯一的元素id，

例如 

<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>

这里的basic就是我要打印的一个id，可以将需要打印的页面写在这个地方，循环遍历渲染数据，这样就很方便了。

demo示例