解决html2canvas 截取leaflet地图出现空白问题

我是在html2canvas属性中添加了useCORS：true  解决跨域就行了

代码

<template>
  <div ref="mapContainer" id="localHeatmap" class="bing_map"></div>
 <el-button icon="Upload" style="height: 40px; width: 100px" @click="exporttable" type="primary">导出数据</el-button>
    
</template>
 
<script setup lang="tsx" name="">
import { ref, onMounted } from "vue";
import L from "leaflet"; // 引入leaflet插件
import "leaflet/dist/leaflet.css";
import "leaflet.heat"; // 引入leaflet.heat插件
import html2canvas from "html2canvas";
 
const mapContainer = ref(null);
const map = ref(null);
const heatLayer = ref<any>(null);
const layer = ref<any>(null);
const heatDataList = ref([
  { lat: 22.973805, lng: 113.189162, value: 999 },
  { lat: 23.034978, lng: 113.36676, value: 81 },
  { lat: 23.029139, lng: 113.36503, value: 82 },
  { lat: 23.01746, lng: 113.35407, value: 93 },
  { lat: 23.009496, lng: 113.367914, value: 84 },
  { lat: 23.005333, lng: 113.335193, value: 85 },
  { lat: 23.003551, lng: 113.315272, value: 86 },
  { lat: 22.993617, lng: 113.303927, value: 87 },
  { lat: 22.983938, lng: 113.276812, value: 88 },
  { lat: 22.988475, lng: 113.263313, value: 90 },
  { lat: 23.001436, lng: 113.274937, value: 30 },
  { lat: 23.002641, lng: 113.287871, value: 86 },
  { lat: 23.000079, lng: 113.305061, value: 33 },
  { lat: 23.016053, lng: 113.270026, value: 98 }
]);
 
// 初始化地图
const initializeMap = () => {
  // 创建地图
  map.value = L.map(mapContainer.value).setView([22.973805, 113.189162], 12);
  
  // 添加瓦片图层
   L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
     attribution: "© OpenStreetMap contributors"
   }).addTo(map.value);
  
 
  // 生成热力图图层，并添加到地图中
  heatLayer.value = L.heatLayer(heatDataList.value, {
    radius: 30,
    minOpacity: 0.6
  }).addTo(map.value);
 
};

//导出函数
const exporttable = () => {
  const element = ref<any>(document.getElementById("localHeatmap"));
  html2canvas(element.value, {
    backgroundColor: null,
    useCORS: true // 如果截图的内容里有图片,可能会有跨域的情况,加上这个参数,解决文件跨域问题
  }).then(canvas => {
    // 创建一个链接元素
    const link = document.createElement("a");
    // 将canvas的图像数据转换为DataURL
    const dataUrl = canvas.toDataURL("image/png");
    // 设置链接的href属性为DataURL
    link.href = dataUrl;
    // 设置链接的下载属性为文件名
    link.download = `滴滴答答报告`;
    // 模拟点击链接进行下载
    link.click();
  });
  ElMessage.success({ message: `采样报告已下载,请到本地浏览器查看` });
};

</script>
 
<style lang="scss" scoped>
  .bing_map {
    width: 100%;
    margin: 0px 20px 20px 20px;
    height: 69vh;
    border: solid 1px red;
  }
</style>