Print.js 打印库使用指南：PDF、HTML 与图片打印配置

本文详细介绍 Print.js 库的安装、引入及核心功能。涵盖四种打印类型（pdf、html、image、json）的具体用法，重点解析 HTML 打印中的分页样式配置及图片批量打印参数设置。通过代码示例展示如何调用 printJS 方法并传入相应参数，实现前端文档、网页内容及图片的高效打印。

一.安装及引入Print.js

1.安装

npm install print-js --save
//or
yarn add print-js

2.在需要使用的文件引入

import printJS from 'print-js'

二.介绍

Print.js 支持四种打印模式：'pdf'、'html'、'image' 和 'json'。

其基本调用方式为执行 printJS() 函数，并传入相应的配置参数。

//pdf打印 传入PDF文档url
printJS('docs/PrintJS.pdf')

//图片打印 传入图片url，第二个参数:'image'
printJS('images/PrintJS.jpg', 'image')

//html打印 第一个参数:元素id，第二个参数:'html'
printJS('myElementId', 'html')

//json打印 当打印Json数据时，传入要打印的数据、类型和数据属性
printJS({printable: myData, type: 'json', properties: ['prop1', 'prop2', 'prop3']})

三.常用配置

Print.js 接收一个配置对象作为参数，允许用户自定义以下选项：

字段	默认值	说明
printable	null	数据源:pdf or image的url，html类型则填打印区域元素id，json类型则是数据object。
type	'pdf'	可选类型:pdf, html, image, json。
header	null	应用于页面顶部标题文本。
headerStyle	'font-weight: 300;'	应用于标题文本的可选标题样式。
maxWidth	800	最大文档宽度(像素)。
css	null	这允许我们传递一个或多个css文件的url，应该应用到正在打印的html。Value可以是包含单个URL的字符串，也可以是包含多个URL的数组。
style	null	这允许我们传递一个自定义样式的字符串，该字符串应应用于正在打印的html。

四.具体使用

1.打印Html

<div id="printJS-HTML" style="display:none;">
    <div v-for="index in 5" :key="index">
      <table>
        <tr>
          <td>序号</td>
          <td>作者</td>
        </tr>
        <tr>
          <td>1</td>
          <td>Ghmin</td>
        </tr>
      </table>
       <!--  控制打印分页的关键 -->
      <div class="paging"></div>
    </div>
</div>
<button @click="printHtml">打印 HTML</button>

const printHtml=()=>{
      //在页面显示需打印区域来获取dom
      document.querySelector('#printJS-HTML').style.display = 'block'
      printJS({
        printable: 'printJS-HTML',//打印区域id
        type: 'html',//打印类型
        style: `@page { size: auto; } .paging{page-break-after: always;}`,
      })
      //获取打印内容后隐藏dom
      document.querySelector('#printJS-HTML').style.display = 'none'
}

此处 .paging{page-break-after: always;} 样式是实现分页控制的关键。

2.打印图片

虽然可以使用 HTML 方式打印图片，但更推荐使用 Print.js 内置的 'image' 打印类型。

  printJS({
    printable: ['第一张图片Url','第二张图片Url','第三张图片Url'],
    type: 'image',
    header: null,
    imageStyle: `display: block;margin: 0 auto;page-break-after: always;max-width:100%`
  })

相比 HTML 方式，该方法更为简便，只需传入待打印图片的 URL 数组即可。

更多详细信息可访问 Print.js 官网：https://printjs.crabbly.com/

总结

本文介绍了利用 Print.js 实现 PDF、HTML 及图片打印的方法，相关内容已介绍完毕。如需了解更多关于 Print.js 打印 PDF、HTML 及图片的内容，请搜索本站以前的文章或继续浏览下面的相关文章，希望大家以后多多支持本站！