利用print-js局部打印前端页面

最新推荐文章于 2025-09-10 14:01:38 发布

原创最新推荐文章于 2025-09-10 14:01:38 发布 · 948 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #css

实战总结专栏收录该内容

17 篇文章

订阅专栏

本文介绍了在前端开发中遇到的档案整理局部打印需求，通过对比window.print()方法的不足，作者使用自定义js插件实现了iframe的局部打印。然而，对于长列表的案卷目录，这种方法仍存在问题。作者进一步调研并引入了PrintJS库，通过传递JSON数据实现更灵活的打印效果，避免了长列表分页的问题。代码示例展示了如何配置PrintJS进行定制化打印，包括设置打印内容、标题、样式等。

最近开发过程中遇到这么一个需求，在做档案整理的时候需要把组册的案卷目录进行打印，首先想到的是window.print方法，但是这种方式打印的是整个页面，不符合需求。所以就自定义了一个js插件插件，利用iframe的window对象去局部打印所需内容，具体可以看我的上一篇文章<<前端实现局部打印页面>>，但是需求打印的案卷目录有可能很长（因为不想分页打印，叫苦连天！！！），抓取页面打印的这种方式并不能很好的展示全部目录。在一方调研之后找到了print-js提供的通过传JSON数据能够满足这种需求。

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

上代码：

handlePrint() {
      const copyList = cloneDeep(this.listTable)
      map(copyList, item => {
        // 标为电子凭证的数据不显示序号
        if(item[this.isElectronicProp] === 'Y') item['serialNum'] = ''
      })
      printjs({
        printable: copyList, // pdf或图像url、html元素id或json数据对象
        properties: [ // 需要展示的列表属性及列表命名
          { field: 'serialNum', displayName: '序号' },
          { field: this.scanCodeProp, displayName: '单据编码' },
          { field: this.pzProp, displayName: '凭证号' },
          { field: 'isElectronic', displayName: '是否为电子凭证' }
        ],
        type: 'json',  // 打印类型
        header: this.titleSerialNum, // 用于HTML、图像或JSON打印的可选标题
        headerStyle: 'font-size: 20px; padding-bottom: 20px; text-align: center;', // 可选标题样式
        gridHeaderStyle: 'border-width: 0; color: #909399; padding-bottom: 5px;', //表格头样式
        gridStyle: 'border: 1px solid #ebeef5; text-align:center; color: #909399; padding: 5px 0;', // 表格体样式
      })
    },

效果图：
在这里插入图片描述