Print.jsはPDF、HTML、画像の印刷を実現します（スタイルの設定とページングが可能）

1. Print.jsのインストールとインポート

1.インストール

npm install print-js --save
//or
yarn add print-js

2. 使用する必要のあるファイルに導入します

import printJS from 'print-js'

2. はじめに

Print.js には、「pdf」、「html」、「image」、「json」の 4 つの印刷タイプがあります。

基本的な使用法は、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']})

3. 共通構成

Print.js はオブジェクトをパラメーターとして受け入れます。ここでいくつかのオプションを構成できます。

分野	デフォルト	説明する
印刷可能	ヌル	データソース: pdf または画像の URL、html タイプの場合は印刷領域要素 ID、json タイプの場合はデータオブジェクトを記入します。
タイプ	「pdf」	オプションのタイプ: pdf、html、画像、json。
ヘッダ	ヌル	ページ上部のヘッダーテキストに適用されます。
ヘッダースタイル	'フォントの太さ: 300;'	見出しテキストに適用するオプションの見出しスタイル。
最大幅	800	ドキュメントの最大幅 (ピクセル単位)。
css	ヌル	これにより、印刷される HTML に適用される CSS ファイルの 1 つ以上の URL を渡すことができます。値には、単一の URL を含む文字列、または複数の URL を含む配列を指定できます。
スタイル	ヌル	これにより、印刷される HTML に適用するカスタムスタイルの文字列を渡すことができます。

4. 具体的な用途

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 公式 Web サイトをご覧ください: https://printjs.crabbly.com/

Print.jsはPDF、HTML、画像の印刷を実現します（スタイルの設定とページングが可能）

1. Print.jsのインストールとインポート

2. はじめに

3. 共通構成

4. 具体的な用途

おすすめ