vue-org-tree实现导出组织架构图方式

npm install html2canvas file-saver

<template>
  <div>
    <org-tree :data="orgData" />
    <button @click="exportOrgChart">导出组织架构图</button>
  </div>
</template>
<script>
import OrgTree from 'vue-org-tree'
import html2canvas from 'html2canvas'
import { saveAs } from 'file-saver'
export default {
  components: {
    OrgTree
  },
  data() {
    return {
      orgData: {
        // 组织架构数据
      }
    }
  },
  methods: {
    exportOrgChart() {
      const element = document.querySelector('.org-tree'); // 获取组织架构图的容器元素
      html2canvas(element).then(canvas => {
        // 创建一个图片元素
        let img = new Image();
        img.src = canvas.toDataURL('image/png');
        // 创建并触发下载
        img.onload = () => {
          let w = img.width;
          let h = img.height;
          let canvas2 = document.createElement('canvas');
          let ctx = canvas2.getContext('2d');
          canvas2.width = w;
          canvas2.height = h;
          ctx.drawImage(img, 0, 0, w, h);
          saveAs(canvas2.toDataURL('image/png'), '组织架构图.png');
        };
      });
    }
  }
}
</script>