ドキュメント DOM ノードを html2canvas および jspdf に基づいた画像に変換して PDF ファイルを生成し、ローカルにダウンロードします

---

ここでは、html2canvas を使用してドキュメント DOM ノードを画像に変換し、ローカル_Your Beloved Qiangge’s Blog-CSDN Blog にダウンロードする必要があります。フロントエンドはネイティブJS を使用してファイルの内容を編集→生成されたファイルを作成 (形式はカスタマイズ可能)→ファイルをダウンロード_Your Beloved Qiangge’s Blog-CSDN Blog です。htmlファイルが自動で作成されます。https://blog.csdn.net/qq_37860634/article/details/131752136

jspdf プラグインの公式 Web サイトと GitHub について学ぶ 

jsPDF PDF 生成用のオープンソース ソリューションである jsPDF を使用して、プロフェッショナルな PDF を簡単に生成します。直感的なインターフェイスを使用して、イベント チケット、レポート、証明書などを数分で作成できます。https://parall.ax/products/jspdf GitHub - parallax/jsPDF: 誰でも使えるクライアントサイド JavaScript PDF 生成。誰でも使えるクライアントサイド JavaScript PDF 生成。- GitHub - parallax/jsPDF: 誰でも使えるクライアントサイド JavaScript PDF 生成。https://github.com/parallax/jsPDF安装先

npm install jspdf --save

引用 

import { jsPDF } from "jspdf";

 ユースケースコード

<template>
    <div>
        <h1 style="font-size: 100px;">自定义下载PDF</h1>
        <el-button type="primary" ref="btn" @click="downloadImg({ dom: $el, fileName: '自定义.pdf' })">下载当前网页为pdf</el-button>
    </div>
</template>
<script>
import html2canvas from 'html2canvas'; // npm install --save html2canvas (官网：https://html2canvas.hertzen.com)
import { jsPDF } from "jspdf"; // npm install jspdf --save (官网：https://parall.ax/products/jspdf https://github.com/parallax/jsPDF)
export default {
    methods: {
        downloadImg({ dom, fileName = '', pdfWidth, pdfHeigth, } = {}) {
            html2canvas(dom).then(canvas => new jsPDF('l', 'pt', [pdfWidth || innerWidth, pdfHeigth || innerHeight]).addImage(canvas, 'PNG', 0, 0, canvas.width, canvas.height).save(fileName));
        },
    }
};
</script>