概要

前端实现打印(包含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示例

Logo

前往低代码交流专区

更多推荐