网页打印非常优秀的插件 Print.js

最新推荐文章于 2025-06-27 15:20:04 发布

chelflan

最新推荐文章于 2025-06-27 15:20:04 发布

阅读量2w

点赞数 3

CC 4.0 BY-SA版权

分类专栏：打印文章标签： Print Print.js 网页打印插件非常好用的网页打印插件

本文链接：https://blog.csdn.net/qq_31001889/article/details/90020289

打印专栏收录该内容

6 篇文章

订阅专栏

本文介绍了一款名为Print.js的Web打印插件，它支持多种格式如HTML、PDF、Image、JSON的打印，使用简便，响应速度快。文章详细阐述了如何在项目中引入并使用Print.js，特别强调了在打印大量HTML内容时提高效率的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前言：最近需要在网页上打印，网上找了很多，刚开始使用的 lodop打印插件来打印，没有达到理想的要求，它需要下载、区分浏览器的位数来安装、在vue使用时候必须写成内部样式，在笔记本样式失效等问题，使我不得不放弃
lodop打印插件的使用，有兴趣的可以看下
经过同事的告知，找到了一款非常优秀的打印插件，Print.js,一款小巧且非常强大的打印插件，同事是在github上搜索的，而我是在百度上搜索的，所以对于自己没有及时发现它而感到遗憾，却有幸使用它而开心

Print.js的github地址 readme中有使用说明】
Print.js官网地址里面有具体的使用方法和examples

目前发现的缺点，对ie浏览器的打印效果不好，直接就打印了，看不到预览的效果

以下为转载它人的，类似官网的例子，自己很懒，就不自己码字了

安利一款好用的web js打印控件，支持打印html、pdf、image、json类型。打开预览时响应速度非常快，使用

npm install print-js --save

或

官方下载地址:

<script src="print.js"></script>

pdf:


   
     
      
     
     
       
       <button type="button" onclick="printJS('docs/printjs.pdf')">
      
     

     
      
     
     
      
           Print PDF
      
     

     
      
     
     
       
       </button>

html:

打印区域id范围中


   
     
      
     
     
      
       <form method="post" action="#" id="printJS-form">
      
     

     
      
     
     
      
           ...
      
     

     
      
     
     
       
       </form>
      
     

     
      
     
     
       
      
     

     
      
     
     
       
       <button type="button" onclick="printJS('printJS-form', 'html')">
      
     

     
      
     
     
      
           Print Form
      
     

     
      
     
     
       
       </button>

image:

printJS('images/print-01-highres.jpg', 'image')

json:


   
     
      
     
     
      
        someJSONdata = [
      
     

     
      
     
     
      
           {
      
     

     
      
     
     
      
              name: 
       'John Doe',
      
     

     
      
     
     
      
              email: 
       'john@doe.com',
      
     

     
      
     
     
      
              phone: 
       '111-111-1111'
      
     

     
      
     
     
      
           },
      
     

     
      
     
     
      
           {
      
     

     
      
     
     
      
              name: 
       'Barry Allen',
      
     

     
      
     
     
      
              email: 
       'barry@flash.com',
      
     

     
      
     
     
      
              phone: 
       '222-222-2222'
      
     

     
      
     
     
      
           },
      
     

     
      
     
     
      
           {
      
     

     
      
     
     
      
              name: 
       'Cool Dude',
      
     

     
      
     
     
      
              email: 
       'cool@dude.com',
      
     

     
      
     
     
      
              phone: 
       '333-333-3333'
      
     

     
      
     
     
      
           }
      
     

     
      
     
     
      
        ]


   
     
      
     
     
      
       <button type="button" onclick="printJS({printable: someJSONdata, properties: ['name', 'email', 'phone'], type: 'json'})">
      
     

     
      
     
     
      
           Print JSON Data
      
     

     
      
     
     
       
       </button>

全部参数可以直接查看官网点击打开链接,

github地址:点击打开链接

这里主要说下打印html时候需要注意的事项:

直接采用默认的参数打印html的时候如果打印内容过多时候可能会非常慢，这时候需要设置scanStyles:false,然后把css抽取出来，这样速度就会非常的快！测试下打打开50页，甚至更多都是非常快的，没有卡顿现象。

printJS({ printable: 'myHtmlElement', type: 'html', scanStyles: false, css: '/my_stylesheet.css' })