jsPDF:クライアント生成PDF

铅クライアント生成PDF(2種類)
jsPDF公式サイトhtml 2 canvas公式サイト
実現一:jsPDF
実現二:jsPDF+html 2 canvas
方案一:jsPDF実現:

jsPDFファイルを導入する:cdn導入:

"https://unpkg.com/jspdf@latest/dist/jspdf.min.js"</span>>

Using npm:

npm install jspdf --save

コード実装(pdf.text():

  let pdf = new jsPDF()
  pdf.text('Hello world!', 10, 10)
  pdf.save('  .pdf')

コード実装(pdf.from HTML):

let pdf = new jsPDF()
pdf.fromHTML(document.getElementById('box'), 10, 10)

問題:中国語の文字化け
中国語の文書を含む過程で中国語の文字化けが発見され、文書によってjsPDFは中国語に対応していないことが分かりました.プロジェクトjsPDF-CustoomFonts-supportによって中国語フォントを導入し、pdfを一部エクスポートした後、中国語フォントに文字化けが表示される問題を解決しました.このプラグインはCDNではなく、プロジェクトのソースコードを地元にダウンロードし、distフォルダの下に関連スクリプトがあります.fontフォルダの下には関連フォントファイルがあります.
テストコード:
フォントライブラリをインポート

  let pdf = new jsPDF();

  pdf.addFont('NotoSansCJKjp-Regular.ttf', 'NotoSansCJKjp', 'normal');

  //pdf    
  pdf.setFont('NotoSansCJKjp');

  pdf.text('             ，             ', 10, 10)
  pdf.save('  .pdf')

BUTをテストした後、まだ30%-40%の中国語が正常に表示されません.国内の実際の業務ロジックに対して、中国語ではこの方案は通用しないと正常に示していません.公式サイトではhtmlの一つの方法だけを見つけました.httml 2 canvasと組み合わせて実現するということです.
AND pdf.from HTML()メソッドはテーブルが存在するPDFファイルを実現する中で、トラブルの程度はJsPDF+html 2 canvasの実現に劣らない.
案二:jsPDF+html 2 canvas実現
jsPDFプラグインは中国語に対してあまり友好的ではなく、文字化けの問題があります.現在の比較的良い解決方法は、中国語の部分は写真を使って交替します.もう一つの方法はテキストパックを作ることです.このようなやり方はソースコードに対して深い理解が必要です.このように面倒くさいと思います.すべての内容を入れてもいいです. キャンバス に使用します httml 2 canvas プラグインはcanvasの内容を画像に変換し、jspdfに画像を表示すればいいです.
具体的な実現を書いたことがありますが、参考にしてください. :

ページは手動で計算する必要があります.

ページの中でDOMを検出することができなくて、表に出会う時直接断ち切ります.

は、ヘッダを追加します.

によって生成されたファイルのサイズが大きい.

案3:pdfkit+svg-to-pdfkit+voilab-pdf-table
大同小異はテストがありません.
まとめ:何時間もの試みと資料を調べて、PDFの生成については、自分の業務ロジックに基づいて選択して実現します.ページのプリントをするだけなら、window.printがいいと思います.比較的に寒いブラウザで知識をプリントします.
後で勉強して、自分でまとめます.参考文献
転載先:https://juejin.im/post/5c137fe8e51d45351129a878