利用Print.js实现打印pdf、HTML及图片(可设置样式可分页)

免费资源网 – https://freexyz.cn/

目录

• 一.安装及引入Print.js
• 1.安装
• 2.在需要使用的文件引入
• 二.介绍
• 三.常用配置
• 四.具体使用
• 1.打印Html
• 2.打印图片
• 总结

一.安装及引入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接受一个对象作为参数，在这里你可以配置一些选项:

四.具体使用

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/

总结

免费资源网 – https://freexyz.cn/