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

最新推荐文章于 2026-02-27 12:30:00 发布

原创最新推荐文章于 2026-02-27 12:30:00 发布 · 721 阅读

本内容遵循CC 4.0 BY-SA版权协议

基本思路:vue-org-tree 是一个用于展示组织架构图的 Vue 组件。要实现组织架构图的导出，可以使用 html2canvas 库来将组织架构图转换为图片，然后利用 FileSaver.js 库来保存生成的图片。

步骤如下：
①安装依赖：npm install html2canvas file-saver
②js实现逻辑（详见示例代码）

示例代码：

<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>