前端实现批量打印文件，PrintJs

最新推荐文章于 2025-05-07 15:33:23 发布

哥要掉线了

最新推荐文章于 2025-05-07 15:33:23 发布

阅读量1.9k

点赞数 6

CC 4.0 BY-SA版权

文章标签：前端 react javascript

本文链接：https://blog.youkuaiyun.com/weixin_47677528/article/details/144403679

功能场景：在table组件批量选择文件并批量打印

解决方案：使用PrintJs+递归

1.安装PrintJs

1.使用npm
npm install print-js --save

2.使用yarn
yarn add print-js

2.导入PrintJs

import PrintJs from 'print-js'

3.批量打印实际代码

  onPush = () => {
    // 模拟数据
    const list = [
      {
        url: 'http://xxx/name1.pdf',
        type: 'pdf'
      },
      {
        url: 'http://xxx/name2.pdf',
        type: 'pdf'
      },
      {
        url: 'http://xxx/name3.png',
        type: 'image'
      },
    ]
    //调用打印方法
    this.printInvoice(arr)
  }

  printInvoice = (arr) => {
    if(!arr || arr.length === 0){
      return
    }
    let self = this
    let list =  arr
    let printObj = list.shift()
    
    PrintJs({ 
      printable: printObj.url,    // 打印文件url
      type: printObj.type,        // 文件类型
      // 关闭打印窗口回调
      onPrintDialogClose: (res) => {
        if(list && list.length > 0){
          // 递归调用
          self.printInvoice(list)
        }
      },
      // 失败回调
      onError: err => {
        console.log('err',err);
      }
    })
  }

4.附上配置文档

属性	默认值	描述
printable	null	文档来源：pdf 或图像 url、html 元素 id 或 json 数据对象。
type	'pdf'	可打印类型。可用的打印选项包括：pdf、html、image、json 和 raw-html。
header	null	用于 HTML、图像或 JSON 打印的可选标题。它将放置在页面顶部。此属性将接受文本或原始 HTML。
headerStyle	'font-weight: 300;'	要应用于页眉文本的可选页眉样式。
maxWidth	800	最大文档宽度（以像素为单位）。根据需要更改此设置。打印 HTML、图像或 JSON 时使用。
css	null	这允许我们传递一个或多个 css 文件 URL，这些 URL 应该应用于正在打印的 html。值可以是具有单个 URL 的字符串，也可以是具有多个 URL 的数组。
style	null	这允许我们传递一个具有自定义样式的字符串，该字符串应应用于正在打印的 html。
scanStyles	true	设置为 false 时，库将不处理应用于正在打印的 html 的样式。使用参数时很有用。
targetStyle	null	默认情况下，库在打印 HTML 元素时仅处理某些样式。此选项允许您传递要处理的样式数组。例如： ['padding-top'， 'border-bottom']
targetStyles	null	但是，与“targetStyle”相同，这将处理任何一系列样式。例如：['border'， 'padding']，将包括 'border-bottom'、'border-top'、'border-left'、'border-right'、'padding-top' 等。您还可以传递 ['*'] 来处理所有样式。
ignoreElements	[]	接受打印父 html 元素时应忽略的 html ID 数组。
properties	null	打印 JSON 时使用。这些是对象属性名称。
gridHeaderStyle	'font-weight: bold;'	打印 JSON 数据时网格标头的可选样式。
gridStyle	'border: 1px solid lightgray; margin-bottom: -1px;'	打印 JSON 数据时网格行的可选样式。
repeatTableHeader	true	打印 JSON 数据时使用。设置为时，数据表标题将仅显示在第一页中。
showModal	null	启用此选项可在检索或处理大型 PDF 文件时显示用户反馈。
modalMessage	'Retrieving Document...'	设置为时向用户显示的消息。
onLoadingStart	null	加载 PDF 时要执行的功能
onLoadingEnd	null	加载 PDF 后要执行的功能
documentTitle	'Document'	打印 html、image 或 json 时，这将显示为文档标题。
fallbackPrintable	null	打印 pdf 时，如果浏览器不兼容（检查浏览器兼容性表），库将在新选项卡中打开 pdf。这允许您传递要打开的不同 pdf 文档，而不是在“可打印”中传递的原始文档。如果您在备用 pdf 文件中注入 javascript，这可能很有用。
onPdfOpen	null	打印 pdf 时，如果浏览器不兼容（检查浏览器兼容性表），库将在新选项卡中打开 pdf。可以在此处传递回调函数，当发生这种情况时将执行该函数。在某些情况下，当您想要处理打印流程、更新用户界面等时，它可能很有用。
onPrintDialogClose	null	关闭浏览器打印对话框后执行回调函数。
onError	error => throw error	发生错误时要执行的回调函数
base64	false	打印作为 base64 数据传递的 PDF 文档时使用。