pdfcreator无法打印（Print.js实现打印pdf，HTML，图片(可设置样式可分页)）

一.安装及引入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/