JSはどのようにHTMLページを複数ページPDFにエクスポートしますか?

前の話
前にブログを書きました. JSはどのようにHTMLページをPDFにエクスポートしますか? . 当時はただ自分に必要なものがありました.PDFの一ページをエクスポートして、例を書きました.
その後、同級生からの私信があります.どのように複数のページのPDFを導出するかを聞きました.はい、実はこれらは文書を見て絵を描いて自分で書くことができます.今後も、HTMLを変換して複数ページのPDFをエクスポートする必要があるかもしれません.ライブラリを書くことにしました.  renderPDF でしょう
住所はここですhttps://github.com/pwcong/how-transform-html-into-multipage-pdf
原理
依存したから  jsPDF このライブラリはPDFをエクスポートすると調べられます.  jsPDF 関連文書を作成します
文書を見ることによって、jsPDF 新しいページを追加するAPI関数を提供します.  addPage()ですので、長すぎるdivのページを考慮して、それをめぐって考えます.
ここで大体の手順を説明します.
まずPDFを導出するdivをcanvasとしてレンダリングし、canvasのピクチャurlデータを取得する.  content 新しいdivの名前は  imgData 挿入  page 中:
style、class、idを設定すると  body 一致した後、次のステップを継続する.
幅を設定  content の幅は、高度に設定されています.計算されたpageHeightのソースコードは以下の通りです.
1 2 3 4 5 6 7 8 そのうち  content 事前定義されたオブジェクトのために、  pdfFormat 入力するPDFフォーマットその背景を設定します  format 続いてcontentHeightとpageHeightを判断します.
前者が後者の説明より小さいなら、ページを分けずに直接に画像データを追加してエクスポートします.ソースは以下の通りです.

    var pdfProportion = pdfFormat[format][0] / pdfFormat[format][1];

    var contentHeight = content.offsetHeight;
    var contentWidth = content.offsetWidth;

    var pageHeight = contentWidth / pdfProportion;
    var pageWidth = contentWidth;

1 2 3 4 5 6 7 前者が後者より大きい場合は、改ページが必要です.
まずページ数を求める  url(imgData) ,サイクル数は  count 設定  count-1 の  page オフセット次にレンダリングpageがcanvasで画像urlデータを取得する.  background 挿入  pageData オブジェクトのうち、pdf オブジェクトの実行  pdf 関数最後のページを追加します.最後のページの高さはaddPage()サイズと一致しないかもしれないので、設定します.  pageHeight の高さを計算したものです.  page ,canvasにレンダリングして画像データを取得して挿入する  lastPageHeight 中エクスポート保存、ソースは以下の通りです.

    if(contentHeight < pageHeight){

        pdf.addImage(imgData, 'JPEG', 0, 0,pdfFormat[format][0],pdfFormat[format][1]/pageHeight*contentHeight);

        pdf.save(pdfName);

    }

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 最後に、`pdf 名前を削除  body の  page 後に書く
個人の能力が足りないため、この方法はページ数が多すぎるPDFを導出する時(例えば20ページ以上)、明らかなブラウザのカートンがあります. そして何の最適化も行われていません.PDFは曖昧です.解決方法があれば、個人的に信頼できると思います.
そしてこの方法はちょっとdirty hackです.実は一番smart hackの方法は直接js実行関数です.  div ,エクスポート  window.print() 効果も非常に良く、ブラウザの公式実装です.
著作権声明:本文はブロガーのオリジナル文章で、ブロガーの許可なしに転載してはいけません.https://blog.csdn.net/pwc1996/article/details/70141383