Vue フロントエンドで PDF を生成してダウンロードする方法

//ページのHTMLを画像に変換します npm install html2canvas --save  
// 画像からPDFを生成する
npm インストール jspdf --save

'@/utils/htmlToPdf' から htmlToPdf をインポートします。
// Vue.use() メソッドを使用すると、ツール メソッド Vue.use(htmlToPdf) のインストール メソッドが呼び出されます。

pdf = new jsPDF('p', 'pt', [pdfX, pdfY]); とします。
最初のパラメーター: l: 水平、p: 垂直。 2 番目のパラメーター: 測定単位 ("pt"、"mm"、"cm"、"m"、"in"、または "px")。
3 番目のパラメータ: 次の形式にすることができます。デフォルトは "a4" です。カスタム形式の場合は、サイズを数値配列として渡すだけです (例: [592.28, 841.89])。
		   a0 - a10
		   b0 - b10
		   c0 - c10
  		   ダウンロード
		   手紙
		   政府からの手紙
		   法律上の
		   ジュニアリーガル
		   元帳
		   タブロイド
		   クレジットカード

let targetPage = pdf.internal.getNumberOfPages(); // 合計ページ数を取得する pdf.deletePage(targetPage); // 対象ページを削除する

pdf.save(`test.pdf`);

// ページを PDF 形式でエクスポートする import html2Canvas from 'html2canvas'
'jspdf' から JsPDF をインポートします
エクスポートデフォルト{
  インストール (Vue, オプション) {
    Vue.prototype.getPdf = 関数（）{
      // PDF をダウンロードするときに、ページの先頭にない場合は PDF スタイルが正しくなくなるため、ページの先頭に戻ってからダウンロードします。let top = document.getElementById('pdfDom');
      （トップ！= null）の場合{
        上部にスクロールしてビューに移動します。
        上部 = null;
      }
      title = this.exportPDFtitle とします。
      html2Canvas(document.querySelector('#pdfDom'), {
        汚染を許可: true
      }).then(関数(キャンバス) {
        // キャンバスの幅と高さを取得します。let contentWidth = canvas.width;
        contentHeight を canvas.height に設定します。
	      // HTML ページを表示する PDF ページによって生成されるキャンバスの高さ。
        pageHeight = contentWidth / 841.89 * 592.28 とします。
	      //PDF を生成しない HTML ページの高さ let leftHeight = contentHeight;
	      // ページオフセット let position = 0;
	      // PDF 内の HTML ページによって生成されたキャンバス イメージの幅と高さ (この場合: 横長の A4 用紙 [841.89, 592.28]、縦のサイズを変更する必要があります)
        imgWidth = 841.89 とします。
        imgHeight = 841.89 / contentWidth * contentHeight とします。
        pageData = canvas.toDataURL('image/jpeg', 1.0); とします。
        PDF = new JsPDF('l', 'pt', 'a4'); とします。
        // 2 つの高さを区別する必要があります。1 つは HTML ページの実際の高さで、もう 1 つは生成された PDF ページの高さです。// コンテンツが 1 つの PDF ページの範囲を超えない場合、ページングは​​必要ありません if (leftHeight < pageHeight) {
          PDF.addImage(pageData, 'JPEG', 0, 0, 画像幅, 画像高さ)
        } それ以外 {
          （左の高さ > 0）の間{
            PDF.addImage(pageData, 'JPEG', 0, 位置, 画像幅, 画像高さ)
            左の高さ -= ページの高さ;
            ポジション -= 592.28;
            // 空白ページの追加を避ける if (leftHeight > 0) {
              PDF.addPage();
            }
          }
        }
        PDF.save(タイトル + '.pdf')
      })
    }
  }
}

<テンプレート>
  <div class="wrap">
    <div id="pdfDom" スタイル="padding: 10px;">
      <el-テーブル
        :data="テーブルデータ"
        境界線>
        <el-table-column prop="date" label="日付" width="250"></el-table-column>
        <el-table-column prop="name" label="姓名" width="250"></el-table-column>
        <el-table-column prop="address" label="住所"></el-table-column>
      </el-table>
    </div>
    <button type="button" style="margin-top: 20px;" @click="btnClick">PDF をエクスポート</button>
  </div>

</テンプレート>
 
<スクリプト>
エクスポートデフォルト{
  データ（） { 
    戻る {
      exportPDFtitle: "ページエクスポートPDFファイル名",
      テーブルデータ: [
         {
          日付: '2016-05-06'、
          名前: 王小湖、
          住所: 重慶市九龍坡区火居大道
        }, {
          日付: '2016-05-07'、
          名前: 王小湖、
          住所: 重慶市九龍坡区火居大道
        },{
          日付: '2016-05-03'、
          名前: 王小湖、
          住所: '上海市普陀区金沙江路1518号'
        }, {
          日付: '2016-05-02'、
          名前: 王小湖、
          住所: '上海市普陀区金沙江路1518号'
        }, {
          日付: '2016-05-04'、
          名前: 王小湖、
          住所: '上海市普陀区金沙江路1518号'
        }, {
          日付: '2016-05-01'、
          名前: 王小湖、
          住所: '上海市普陀区金沙江路1518号'
        }, {
          日付: '2016-05-08'、
          名前: 王小湖、
          住所: '上海市普陀区金沙江路1518号'
        }, {
          日付: '2016-05-06'、
          名前: 王小湖、
          住所: '上海市普陀区金沙江路1518号'
        }, {
          日付: '2016-05-06'、
          名前: 王小湖、
          住所: '上海市普陀区金沙江路1518号'
        }, {
          日付: '2016-05-07'、
          名前: 王小湖、
          住所: '上海市普陀区金沙江路1518号'
        }, {
          日付: '2016-05-01'、
          名前: 王小湖、
          住所: '上海市普陀区金沙江路1518号'
        }, {
          日付: '2016-05-08'、
          名前: 王小湖、
          住所: '上海市普陀区金沙江路1518号'
        }, {
          日付: '2016-05-06'、
          名前: 王小湖、
          住所: '上海市普陀区金沙江路1518号'
        }, {
          日付: '2016-05-07'、
          名前: 王小湖、
          住所: '上海市普陀区金沙江路1518号'
        }, {
          日付: '2016-05-06'、
          名前: 王小湖、
          住所: '南京市江寧区江君大道'
        }, {
          日付: '2016-05-07'、
          名前: 王小湖、
          住所: '南京市江寧区江君大道'
        },, {
          日付: '2016-05-04'、
          名前: 王小湖、
          住所: '上海市普陀区金沙江路1518号'
        }, {
          日付: '2016-05-01'、
          名前: 王小湖、
          住所: '上海市普陀区金沙江路1518号'
        }, {
          日付: '2016-05-08'、
          名前: 王小湖、
          住所: '上海市普陀区金沙江路1518号'
        }, {
          日付: '2016-05-06'、
          名前: 王小湖、
          住所: '上海市普陀区金沙江路1518号'
        }, {
          日付: '2016-05-07'、
          名前: 王小湖、
          住所: '上海市普陀区金沙江路1518号'
        },{
          日付: '2016-05-01'、
          名前: 王小湖、
          住所: '上海市普陀区金沙江路1518号'
        }, {
          日付: '2016-05-08'、
          名前: 王小湖、
          住所: '上海市普陀区金沙江路1518号'
        }, {
          日付: '2016-05-06'、
          名前: 王小湖、
          住所: '上海市普陀区金沙江路1518号'
        }, {
          日付: '2016-05-08'、
          名前: 王小湖、
          住所: 武漢市紅山区文化大道
        }, {
          日付: '2016-05-06'、
          名前: 王小湖、
          住所: 武漢市紅山区文化大道
        }, {
          日付: '2016-05-07'、
          名前: 王小湖、
          住所: 武漢市紅山区文化大道
        }, {
          日付: '2016-05-06'、
          名前: 王小湖、
          住所: '南京市江寧区江君大道'
        }, {
          日付: '2016-05-07'、
          名前: 王小湖、
          住所: 武漢市紅山区文化大道
        },
      ]
    } 
  }, 
  メソッド: {
    btnClick(){
      this.$nextTick(() => {this.getPdf();})
    },
  },  
}
</スクリプト>