前端使用html2canvas生成截图：实现步骤与常见坑点解析

作者：橙子

时间：2026-10-31

本文详细记录前端使用html2canvas库生成组件截图并导出文件的完整流程。重点解析下载插件、引入库、获取DOM及调用API的实现步骤，并深入探讨图片跨域污染、CSS样式（动画、伪元素、滤镜等）丢失等常见坑点。针对跨域问题提供Base64转换与后端配置两种方案，最后对比推荐性能更优的domtoimage方案。

文章目录

需求：

实现点击按钮导出组件截图及关联数据信息文件的功能。

分析：

前端需先生成组件的截图，携带其他必要参数发送至后端接口，后端返回Excel文件供用户下载。核心难点在于前端组件截图的生成，本文选用html2canvas插件完成该任务。

实现步骤

1.下载插件

npm install html2canvas

2.引入

import html2canvas from 'html2canvas'

3.通过ref拿到要下载组件的dom元素

	//下载图标，绑定下载事件
	<i class="el-icon-download" style="cursor: pointer;" @click="download"></i>

	//需要生成截图的部分
	<div class='wrapper' ref='screen'>
	...
	</div>

4.通过html2canvas生成截图

	download() {
		//el的全局loading，根据需求，可加可不加,在下载完成时或请求完成时用 loading.close()关闭
        const loading = this.$loading({ 
          lock: true,
          text: '文件下载中',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.8)'
        });
        
        html2canvas(this.$refs.screen, {
          backgroundColor: null,//画布背景色（如果未在DOM中指定）。设置null为透明
          useCORS: true,    //允许跨域
          scale: 1   		//用于渲染的比例
        }).then((canvas) => {
           // 此时已经生成我们想要的截图,可以下载查看
           const url = canvas.toDataURL('image/png') //转图片链接,为图片的base64形式
           const a = document.createElement('a')
           const event = new MouseEvent('click')
           a.download = '图片'
           a.href = url
           a.dispatchEvent(event)
           loading.close()
           
		   // 转为png格式文件格式传以给后端
		   // formData即为我们要传的内容,如果还有其他参数要传输可以通过formData.append('key',value)来添加
		   const formData = new FormData()
		   canvas.toBlob(function(blob) {
            formData.append('image', blob, 'image.png')
          })
        })
      },

可能遇到的问题

1.图片跨域

由于项目图片资源托管于独立平台，生成截图时DOM中的图片因跨域导致Canvas“被污染”，无法生成图像。尝试设置useCORS: true及给img标签添加crossorigin="anonymous"均无效。最终采用两种解决方案：一是将图片转换为Base64编码格式，此法可纯前端解决但存在代码冗余、体积增大及可读性降低等缺点；二是修改服务端配置解决跨域。本文采用第一种方案，并提供转换Base64的方法代码。（但这种方法也会有代码冗余体积增大，可读性降低等缺点）

imgUrlToBase64(imgUrl) {
       const image = new Image();
       image.setAttribute('crossOrigin', 'anonymous');
       const imageUrl = imgUrl;
       image.src = imageUrl
       // image.onload为异步加载
       image.onload = () => {
         var canvas = document.createElement('canvas');
         canvas.width = image.width;
         canvas.height = image.height;
         var context = canvas.getContext('2d');
         context.drawImage(image, 0, 0, image.width, image.height);
         var quality = 0.8;
         const dataurl = canvas.toDataURL('image/png', quality);
         console.log(dataurl, 'dataurl64')
       }
     },