VUEは、PDFを生成します

メインリファレンス

https://blog.csdn.net/qq_37880968/article/details/94626001

モジュールを追加します。1.

NPMインストール--save html2canvas

NPMインストールjspdf --save

ユーティリティ機能の2.はじめに

輸入html2canvas から ' html2canvas ' ;
輸入JsPDF から ' jspdf ' ;

/ * *
 * @Param ELE PDF生成されたDOM要素（容器）
 @paramのpadfNameのPDFファイル生成後の*ファイル名
 * * /

関数downloadPDF（ELE、pdfName）{

    eleW LET = ele.offsetWidth; // 取得幅コンテナ 
    エレ= ele.offsetHeightを聞かせ; // 高さの容器を取得 
    しましょうをeleOffsetTop = ele.offsetTop;   // ドキュメント上からコンテナを取得 
    eleOffsetLeft = ELEをしましょう。 offsetLeft; //は、左端からドキュメントへのコンテナを取得します

    VARキャンバス=のdocument.createElement（" キャンバス" ）;
    VaRの腹筋= 0 ;

    LET win_in = document.documentElement.clientWidth || document.body.clientWidth; // GET幅の現在の可視ウィンドウの（スクロールバーなし） 
    ;せwin_out = window.innerWidth // 現在のウィンドウ幅を取得します（スクロールバーであって、A）

    IF（win_out> win_in）{
         // ABS =（win_o - win_i）/ 2;     // スクロールバーの長さの半分取得 
        ABSを=（win_out - win_in）/ 2 ;     // スクロールバーの幅の半分を取得
         // にconsole.log （ '新しいABS'）; 
    }
    canvas.width = eleW * 2 ;     // 幅の2倍高い増幅&&キャンバス 
    canvas.heightをエレ* = 2 ;

    VaRのコンテキスト= canvas.getContext（" 2D " ）。
    context.scale（2、2 ）。
    context.translate（ -eleOffsetLeft -abs、 - eleOffsetTop）;
     // なしのスクロールバー横にデフォルトの場合、スクロールバーの有無を、そうoffset.left差（）、があるのでどこ、
     // 時間翻訳は、すべきこの差は削除されます

    // html2canvas（要素）.then（（キャンバス）=> { // 报错
     // html2canvas（要素[0]）。次に、（（キャンバス）=> { 
    html2canvas（ELE、{
        解像度：300 、
         // allowTaint：trueに、   //は、それ以外の場合はtoDataURLデータによる輸出キャンバスに不可能であり、allowTaintパラメータが削除され、キャンバスの汚染を許す 
        useCORS：trueに  // クロスドメインを許可、キャンバスキャンバス内のクロスドメインリクエストが外部画像をリンクすることができます許可リクエスト。
    }）.Then（（キャンバス）=> {
         VAR contentWidth = canvas.width;
         VAR contentHeight = canvas.height;
         // PDF HTMLページ表示生成キャンバスの高さ; 
        VARのpageHeight = contentWidth / 592.28 * 841.89 ;
         // なしPDF生成されたHTMLページの高さ
        VAR leftHeight = contentHeight;
         //ページオフセット
        VaRの位置= 0 ;
         // PDFファイルでA4用紙サイズ[595.28,841.89]、HTMLページキャンバス生成された画像の幅と高さ
        VAR imgWidth = 595.28 ;
         VAR imgHeight = 595.28 / * contentWidth contentHeight;
         VAR InboundのPageDateキャンバス= .toDataURL（' 画像/ JPEG '、1.0 ）;
         VARの PDF = 新新 JsPDF（'' 、' 白金'、' A4 ' ）;
         // 2つがあり、高さ、htmlページの実際の高さを区別する必要がある、とPDFを生成し、ページの高さ（841.89）
        // コンテンツがPDFの範囲は、ページングなしで表示超えない場合
        IF（leftHeight < のpageHeight）{
             //はpdf.addImageに（InboundのPageDate、「JPEG」、左、上、幅、高さ）に配置されたPDFファイルの表示であり、 
            PDF .addImage（InboundのPageDate、' JPEG '、0、0 、imgWidth、imgHeight）;
             // pdf.addImage（InboundのPageDate、 'JPEG'、20は、40であり、imgWidth、imgHeight）; 
        } 他 {     // タブ
            一方（leftHeight> 0 ）{
                pdf.addImage（InboundのPageDate、' JPEG '、0 、位置、imgWidth、imgHeight）。
                leftHeight - = のpageHeight。
                位置 - = 841.89 ;
                 // 空白のページを追加することを回避するために
                IF（leftHeight> 0 ）{
                    pdf.addPage（）;
                }
            }
        }
        // 動的に生成することができる
        pdf.save（pdfName）。
    }）
}
輸出のデフォルト{
    downloadPDF
}

3.それが必要とされる文書の導入

HTML：
 <DIV ID = " デモ" > </ div>
JS：handleDown（）{
        htmlToPdf.downloadPDF（document.querySelector（' #demo '）、' アプリケーションを残します' ）
      }

もちろん、最善の利用refの

おすすめ