Vue を使用して Web ページのスクリーンショットを撮る方法をご存知ですか?

npm をインストール html2canvas --save

「html2canvas」からhtml2canvasをインポートします。

<el-button class="button-dalod" size="mini" title="画像を生成" @click="toImage()" icon="el-icon-download"></el-button>

// ページ要素を画像に変換する toImage () {
            // キャンバスタグを手動で作成する const canvas = document.createElement("canvas")
            // 親タグを取得します。つまり、このタグ内の DOM 要素が画像を生成します // imageTofile は、スクリーンショット範囲内の親要素のカスタム参照名です let canvasBox = this.$refs.imageTofile
            // 親の幅と高さを取得します。const width = parseInt(window.getComputedStyle(canvasBox).width)
            定数高さ = parseInt(window.getComputedStyle(canvasBox).height)
            // 幅と高さを2倍に拡大するのは画像がぼやけるのを防ぐためです canvas.width = width * 2
            キャンバスの高さ = 高さ * 2
            canvas.style.width = 幅 + 'px'
            canvas.style.height = 高さ + 'px'
            const コンテキスト = canvas.getContext("2d");
            コンテキスト.スケール(2, 2);
            定数オプション = {
                背景色: null、
                キャンバス: キャンバス、
                CORS の使用: true
            }
            html2canvas(canvasBox, オプション).then((canvas) =​​> {
                // toDataURL 画像形式を base64 に変換
                dataURL = canvas.toDataURL("image/png") とします。
                コンソールログ(データURL)
                this.downloadImage(データURL)
            })
        },
        //画像をダウンロード downloadImage(url) {
            // ウェブページ上にある場合は、直接ダウンロードするための a タグを直接作成できます。let a = document.createElement('a')
            a.href = URL
            a.download = 'ホームスクリーンショット'
            クリック()
        },