html2canvas はドキュメント DOM ノードを画像に変換し、ローカルにダウンロードします。

html2canvas - JavaScript を使用したスクリーンショットhttps://html2canvas.hertzen.com/まずはインストールしてください。

npm install --save html2canvas

使用される知識としては、

フロントエンドはネイティブjsを使用してファイルの内容を編集→生成ファイルを作成（形式はカスタマイズ可能）→ファイルをダウンロード_愛する強い兄貴のブログ - CSDNブログは自動的にhtmlファイルを作成します。https://blog.csdn.net/qq_37860634/article/details/131571646ユースケースコード

<template>
    <div>
        <el-button type="primary" ref="btn" @click="downloadImg({ dom: $el, fileName: '自定义图片名称.png' })">下载当前网页</el-button>
    </div>
</template>
<script>
import html2canvas from 'html2canvas'; // npm install --save html2canvas (官网：https://html2canvas.hertzen.com)
export default {
    methods: {
        downloadImg({ dom, fileName = '', fileType = 'image/png', quality = 1.0 } = {}) {
            html2canvas(dom, { width: dom.scrollWidth, height: dom.scrollHeight, }).then(canvas => { let a = document.createElement('a'); a.download = fileName, a.href = canvas.toDataURL(fileType, quality), a.click(); });
        },
    }
};
</script>

---

詳細情報: 画像をクリップボードにコピーするにはどうすればよいですか?

ネイティブjsで画像コンテンツのクリップボードへのコピーを実現_愛する最強兄貴のブログ - CSDNブログ [コード ] ネイティブjsで画像コンテンツのクリップボードへのコピーを実現します。https://blog.csdn.net/qq_37860634/article/details/131754243