printjs詳解

printjs是一個可以將網頁內容快速轉換成PDF，圖片或純文本格式並進行列印的JavaScript庫。本文將從多個方面對printjs進行詳細的闡述。

一、安裝與基本使用

安裝printjs可以使用npm進行安裝：

npm install print-js

引入printjs並使用它的基本方法如下：

import printJS from 'print-js';

printJS('列印內容');

其中，’列印內容’可以是HTML元素、HTML字元串或URL地址，如下所示：

// 列印當前頁面
printJS();

// 列印指定HTML元素
printJS(document.getElementById('print-element'));

// 列印HTML字元串
printJS('<h1>Hello, PrintJS!</h1>');

// 列印URL地址
printJS('https://www.example.com/file.pdf');

在列印之前，可以使用print()進行設置，例如：

// 設置是否列印背景圖片
printJS({
  printable: '列印內容',
  type: 'html',
  css: '/path/to/style.css',
  background: true
});

// 設置列印的標題
printJS({
  printable: '列印內容',
  type: 'html',
  css: '/path/to/style.css',
  documentTitle: '我的列印文件'
});

// 設置頁面方向為垂直
printJS({
  printable: '列印內容',
  type: 'html',
  css: '/path/to/style.css',
  orientation: 'portrait'
});

二、高級使用

1、自定義列印樣式

可以通過在列印前修改頁面樣式來自定義列印樣式。例如：

// 定義變數保存原始樣式
var originalBodyStyles = window.getComputedStyle(document.body).cssText;
var originalPageStyles = document.getElementById('page1').style.cssText;

// 修改頁面樣式
document.body.style.width = '21cm';
document.body.style.height = '29.7cm';
document.getElementById('page1').style.width = '100%';
document.getElementById('page1').style.padding = '2cm';

// 列印
printJS({
  printable: '列印內容',
  type: 'html',
  css: '/path/to/style.css'
});

// 恢復原始樣式
document.body.style.cssText = originalBodyStyles;
document.getElementById('page1').style.cssText = originalPageStyles;

2、多語言支持

可以通過設置lang屬性來使用多種語言，包括英語、中文、法語、德語、義大利語和西班牙語，如下所示：

<script src="https://unpkg.com/print-js/dist/print.min.js"></script>

<script>
  printJS({
    printable: '列印內容',
    type: 'html',
    css: '/path/to/style.css',
    lang: 'zh-cn'
  });
</script>

三、應用場景

printjs可以應用於多個場景，例如：

1、列印頁面

可以使用printjs將當前頁面或指定頁面列印出來，將頁面內容轉換成PDF格式並下載。

// 列印當前頁面
printJS();

// 列印指定頁面
printJS('https://www.example.com/page');

// 列印HTML字元串
printJS('<h1>Hello, PrintJS!</h1>');

2、列印表格

可以使用printjs將表格轉換成PDF格式，並下載或直接列印。

<table id="my-table">
  <thead>
    <tr>
      <th>名稱</th>
      <th>數量</th>
      <th>價格</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>蘋果</td>
      <td>10</td>
      <td>0.5元</td>
    </tr>
    <tr>
      <td>梨子</td>
      <td>8</td>
      <td>0.4元</td>
    </tr>
  </tbody>
</table>

<button onclick="printTable()">列印表格</button>

<script>
function printTable() {
  printJS({
    printable: 'my-table',
    type: 'html',
    css: '/path/to/style.css'
  });
}
</script>

3、列印圖片

可以使用printjs將圖片轉換成PDF格式，並下載或直接列印。

// 列印圖片
printJS({
  printable: '/path/to/image.jpg',
  type: 'image'
});

四、總結

在本文中，我們對printjs進行了詳細的闡述，包括安裝與基本使用、高級使用和應用場景。希望本文對於使用printjs進行網頁列印的開發者有所幫助。