VUE PDFダウンロード

主な技術スタックは、Vueの、2つのライブラリーです。

次のように具体的なコードは次のとおりです。

<テンプレート>
  <のdiv クラス = " priview_resume_container " >
        <divのスタイル= " フォントサイズ：16pxに" @ =をクリックして" getResume " >ここをダウンロードする</ DIV>
  </ div>
</テンプレート>

<スクリプト> 
  輸出デフォルト{
    名前：' priviewResume ' 。
    方法：{
      getResume（）{
        この.commonUtils.generateResume（
          $（' .Priview_resume_container '）[ 0 ]、
           ' テスト'
        ）
      }
    }、
    成分：{}
  }
</ SCRIPT>

インポートhtml2canvas から ' html2canvas ' 
インポートJsPDF から ' jspdf ' 
エクスポートCONST generateResume =（EL、名前）=> {
  html2canvas（EL）.then（キャンバス => {
    contentWidthましょう = canvas.width
    contentHeight LET = canvas.height
     // PDF HTMLページ表示生成キャンバスの高さ、 
    聞かせてのpageHeight =（contentWidth / 592.28）* 841.89 
    // のPDF HTMLページの高さは発生しない 
    のletをleftHeight = contentHeight
     // ページオフセット 
    のlet位置= 0 
    // A4用紙サイズ[595.28,841.89]、HTMLページキャンバスは、PDFファイルの画像の幅と高さで生成される 
    LET imgWidth = 595.28 
    せimgHeight =（592.28 / contentWidth）* contentHeightを
    聞かせてInboundのPageDate = canvas.toDataURL（' 画像/ JPEG '、1.0 ）
    PDF LET = 新新 JsPDF（「」、「白金」、「A4 」）
     // 2点の高さを区別する必要がある、HTMLページの実際の高さ、およびPDFのページの高さ（841.89）を生成があり
     、//をコンテンツにはPDFを超えない場合は、ページングなしの表示範囲
    IFを（leftHeight < のpageHeight）{
      pdf.addImage（InboundのPageDate、' JPEG '、0、0 、imgWidth、imgHeight）
    } 他{
       一方（leftHeight> 0 ）{
         // ARG3 - >左マージンから、arg6 - >高さ; - ; - >幅引数5 ARG4>距離に余裕 
        pdf.addImage（InboundのPageDate、' JPEG '、0 、位置、imgWidth、imgHeight）
        leftHeight - = のpageHeight
        位置 - = 841.89 
        // 空白のページを追加しない
        のIF（leftHeight> 0 ）{
           // 新しいページを追加
          pdf.addPageを（）
        }
      }
    }
    pdf.save（ `$ {名前} .pdf`）
  }）
}

公共の数字、さらに技術交流へようこそ注意：

おすすめ