在vue项目中使用html2canvas截图（固定区域截图）_vue html2canvas 图片位置-优快云博客

本文链接：https://blog.youkuaiyun.com/xiaobinbin2372/article/details/104051093

本文详细介绍了如何使用html2canvas插件在网页中实现指定区域的截图，并提供了具体的步骤和代码示例，包括安装插件、设置截图区域、截图及下载图片等功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.项目目录下，打开dos窗口使用cnpm安装html2canvas插件。

cnpm isntall html2canvas

2.在使用html2canvas的页面中，引入插件。

import html2canvas from 'html2canvas'

3.先设置截图按钮，然后设置需要截图的div标签的ref。

<el-button @click="screenShot()">截图</el-button>

<div ref="screen">
  <p>html2canvas截图</p>
  <p>html2canvas截图</p>
  <p>html2canvas截图</p>
  <p>html2canvas截图</p>
  <p>html2canvas截图</p>
</div>

4.截图并下载图片到本地

//截屏
screenShot () {
　html2canvas(this.$refs.screen, {
　　　backgroundColor: '#FFFFFF',
     useCORS: true
　}).then((canvas) => {
    if (navigator.msSaveBlob) { // IE10+ 
      let blob = canvas.msToBlob(); 
      return navigator.msSaveBlob(blob, name); 
    } else {
      let imageurl = canvas.toDataURL('image/png')
      //这里需要自己选择命名规则
      let imagename = ""
      this.fileDownload(imageurl, imagename)
    }
　})
},
//下载截屏图片
fileDownload(downloadUrl, downloadName) {
  let aLink = document.createElement("a");
  aLink.style.display = "none";
  aLink.href = downloadUrl;
  aLink.download = `${downloadName}.jpg`;
  // 触发点击-然后移除
  document.body.appendChild(aLink);
  aLink.click();
  document.body.removeChild(aLink);
}