使用Js打印页面

1.添加按钮以打印托管服务器上的pdf文件:

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

对于大文件,您可以在加载文件时向用户显示信息。

 <button type="button" onclick="printJS({printable:'docs/xx_large_printjs.pdf', type:'pdf', showModal:true})">
    Print PDF with Message
 </button>

html打印

有时我们只想打印HTML页面的选定部分，这可能很棘手。使用Print.js，我们可以轻松传递我们要打印的元素的id。该元素可以是任何标记，只要它具有唯一ID即可。该库将尝试将其打印得非常接近它在屏幕上的外观，同时，它将为它创建一个打印机友好的格式。

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

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

print.js 接受带参数的对象。

<button type="button" onclick="printJS({

 printable: 'printJS-form', type: 'html', header: 'PrintJS - Form Element Selection' 

})"></button>

图像打印

通过传递图像网址，Print.js可用于快速打印页面上的任何图像。当您使用低分辨率版本的图像在屏幕上显示多个图像时，此功能非常有用。当用户尝试打印所选图像时，您可以将高分辨率URL传递给Print.js。

只需在屏幕上显示所需的分辨率，即可在页面上加载图像：

 <img src="images/print-01.jpg" />

在您的javascript中，将最高分辨率的图片网址传递给Print.js，以获得更好的打印质量：

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

您还可以为正在打印的图像添加标题：

您还可以为正在打印的图像添加标题：
 printJS({printable: 'images/print-01-highres.jpg', type: 'image', header: 'My cool image header'})

要一起打印多个图像，我们可以传递一系列图像。我们还可以传递要应用于每个图像的样式：

要一起打印多个图像，我们可以传递一系列图像。我们还可以传递要应用于每个图像的样式
 printJS({
  printable: ['images/print-01-highres.jpg', 'images/print-02-highres.jpg', 'images/print-03-highres.jpg'],
  type: 'image',
  header: 'Multiple Images',
  imageStyle: 'width:50%;margin-bottom:20px;'
 })json 印刷

一种简单快捷的方法来打印动态数据或javascript对象数组

javascript代码中包含以下数据集。这可能来自对服务器api的AJAX调用

 someJSONdata = [
    {
       name: 'John Doe',
       email: '[email protected]',
       phone: '111-111-1111'
    },
    {
       name: 'Barry Allen',
       email: '[email protected]',
       phone: '222-222-2222'
    },
    {
       name: 'Cool Dude',
       email: '[email protected]',
       phone: '333-333-3333'
    }
 ]

传递给print.js

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

可以通过传递一些自定义css来设置数据网格的样式

 <button type="button" onclick="printJS({
	    printable: someJSONdata,
	    properties: ['name', 'email', 'phone'],
	    type: 'json',
	    gridHeaderStyle: 'color: red;  border: 2px solid #3971A5;',
	    gridStyle: 'border: 2px solid #3971A5;'
	})">
    Print JSON Data
 </button>我们可以自定义发送对象数组的表头文本

 <button type="button" onclick="printJS({
	    printable: someJSONdata,
	    properties: [
		{ field: 'name', displayName: 'Full Name'},
		{ field: 'email', displayName: 'E-mail'},
		{ field: 'phone', displayName: 'Phone'}
	    ],
	    type: 'json'
        })">
    Print with custom table header text
 </button>

标头为原始html

<button type="button" onclick="printJS({
		printable: someJSONdata,
		type: 'json',
		properties: ['name', 'email', 'phone'],
		header: '<h3 class="custom-h3">My custom header</h3>',
		style: '.custom-h3 { color: red; }'
	  })">
	Print header raw html
</button>