使用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>