Vue实现将网页内容转换为图片并保存到本地

npm install html2canvas --save

npm install dom-to-image --save

<template>
  <div>
    <!-- 目标 DOM 元素 -->
    <div ref="captureElement" class="content-box">
      <h1>需要保存的内容</h1>
      <p>示例文本</p>
    </div>
    <button @click="saveAsImage">保存为图片</button>
  </div>
</template>

<script>
import html2canvas from 'html2canvas';

export default {
  methods: {
    saveAsImage() {
      html2canvas(this.$refs.captureElement).then(canvas => {
        const imgUrl = canvas.toDataURL('image/png');
        const link = document.createElement('a');
        link.download = 'screenshot.png';
        link.href = imgUrl;
        link.click();
      });
    }
  }
};
</script>

methods: {
  saveAsImage() {
    html2canvas(this.$refs.captureElement).then(canvas => {
      const imgUrl = canvas.toDataURL('image/png');
      // 移动端通过图片预览引导用户长按保存
      if (this.isMobile()) {
        ImagePreview([imgUrl]); // 使用 Vant 等 UI 库的预览组件
        this.$toast('请长按图片保存到相册');
      } else {
        // PC 端直接下载
        const link = document.createElement('a');
        link.href = imgUrl;
        link.download = 'screenshot.png';
        link.click();
      }
    });
  },
  isMobile() {
    return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
  }
}

html2canvas(this.$refs.captureElement, {
  backgroundColor: null, // 透明背景
  useCORS: true,         // 允许加载跨域图片
  scale: 2               // 提高分辨率
}).then(canvas => { /* ... */ });

import domtoimage from 'dom-to-image';
export default {
  methods: {
    saveAsImage() {
      domtoimage.toPng(this.$refs.captureElement)
        .then(imgUrl => {
          const link = document.createElement('a');
          link.download = 'screenshot.png';
          link.href = imgUrl;
          link.click();
        });
    }
  }
};

methods: {
  saveAsImage() {
    html2canvas(this.$refs.captureElement).then(canvas => {
      const imgUrl = canvas.toDataURL('image/png');
      // 将 Base64 转为 Blob 对象（解决部分浏览器兼容性问题）
      const blob = this.dataURLtoBlob(imgUrl);
      const link = document.createElement('a');
      link.href = URL.createObjectURL(blob);
      link.download = 'screenshot.png';
      link.click();
      URL.revokeObjectURL(link.href);
    });
  },
  dataURLtoBlob(dataURL) {
    const arr = dataURL.split(',');
    const mime = arr[0].match(/:(.*?);/)[1];
    const bstr = atob(arr[1]);
    let n = bstr.length;
    const u8arr = new Uint8Array(n);
    while (n--) {
      u8arr[n] = bstr.charCodeAt(n);
    }
    return new Blob([u8arr], { type: mime });
  }
}