首页 > 网络编程 > JavaScript > javascript类库 > vue.js > vue2中Print.js使用

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

2024-03-04 10:12:41 作者：TcdRose

项目中有用到打印功能,网上就找了print.js,下面这篇文章主要给大家介绍了关于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示例

总结

到此这篇关于vue2中Print.js使用的文章就介绍到这了,更多相关vue2中Print.js使用内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！