vue3 使用html2canvas导出div指定区域内的图片

1. 安装依赖

npm install html2canvas @1.0.0 

注意：我项目中安装的html2canvas版本是1.0.0，可根据需要安装，如需安装最新版本，使用
npm install html2canvas -s
2. 引入依赖

import html2canvas from "html2canvas";

3. 示例

  div class="assets-left">
    div id="exportAll">
     	// 此处是导出的内容
    /div>
  /div>

  div @click="exportAction">报表导出/div>

// 导出 -> 这个是按钮的导出按钮的触发事件
const exportAction = () =>{
   download();
}
// 下载
const download = () =&g服务器托管网t; {
  let targetDom = document.getElementById("exportAll"); //原本需要截图的div
  console.log(" ~ file: index.vue:33 ~ download ~ targetDom:", targetDom.clientWidth)
  let clonedNode = targetDom.cloneNode(true); //复制一个
  clonedNode.setAttribute(
    "style",
    `width: ${targetDom.clientHeight};height: ${targetDom.clientWidth};`
  );
  document.body.appendChild(clonedNode); //放到body后面
  // 转换成canvas
  html2canvas(targetDom, {
    allowTaint: true,
    taintTest: false,
  }).then(function (canvas) {
    var pageData = canvas.toDataURL("image/png", 1.0);
    saveFile(
      pageData.replace("image/png", "image/octet-stream"),
      new Date().getTime() + ".png"
    );
    document.body.removeChild(clonedNode);
  });
};
// 保存路径下载
function saveFile(data, filename) {
  var save_link = document.createElementNS("http://www.w3.org/1999/xhtml", "a");
  save_link.href = data;
  save_link.download = filename;
  document.body.appendChild(save_link);
  save_link.click();
  save_link.remove();
}

以上三个步骤就可以实现div指定区域内的图片，下一章具体讲解当内容区域很长，怎么导出滑块区域内的完整内服务器托管网容

服务器托管，北京服务器托管，服务器租用 http://www.fwqtg.net

相关推荐: 运维管理软件解决方案：空间、设备及网络管理的智能化革命

随着信息技术的飞速发展，企业的运营越来越依赖于复杂的IT系统。这些系统不仅包括了大量的硬件设备，还包括了各种软件和网络资源。因此，对于企业来说，如何高效地管理和维护这些资源变得至关重要。本文将介绍一种运维管理软件解决方案，该方案具有在地图上快速建立或找到建筑、…