vue3-org-chart/src/views/resource-chart.vue

<template>
    <div style="display: flex; padding: 10px;">
        <div style="margin-right: 10px"><el-switch v-model="horizontal"></el-switch> 横向</div>
        <div style="margin-right: 10px"><el-button @click="exportToPDF" type="primary">导出PDF</el-button></div>
        <div style="margin-right: 10px"><el-button @click="exportImage" type="primary">导出图片</el-button></div>
      </div>
    <div id="tree-container" style="height: 800px;">
          <vue3-tree-org
            ref="treeChart"
            :data="treeData"
            center
            :props="{children: 'childrens'}"
            :horizontal="horizontal"
            :collapsable="collapsable"
            :label-style="style"
            @on-expand="onExpand"
          />
        </div>
  </template>
  <script>


  import { ElSwitch, ElColorPicker, ElMessage } from 'element-plus'
  import html2pdf from 'html2pdf.js'
  import { ref } from 'vue'
  import domToImage from 'dom-to-image';


  export default {
    name: "resource-chart",
    components: {
      ElSwitch,
      ElColorPicker
    },
    setup() {

    },
    data() {
      return {
        treeData: {
            "id":1,"label":"xxx科技有限公司",
            "childrens":[
                {
                    "id":2,"pid":1,"label":"产品研发部",
                    "childrens":[
                        {"id":6,"pid":2,"label":"禁止编辑节点"},
                        {"id":8,"pid":2,"label":"禁止拖拽节点"},
                        {"id":10,"pid":2,"label":"测试"}
                    ]
                },
                {
                    "id":3,"pid":1,"label":"客服部",
                    "childrens":[
                        {"id":11,"pid":3,"label":"客服一部"},
                        {"id":12,"pid":3,"label":"客服二部"}
                    ]
                },
                {"id":4,"pid":1,"label":"业务部"}
            ]
        },
        horizontal: false,
        collapsable: true,
        onlyOneNode: false,
        expandAll: true,
        disaled: false,
        style: {
          background: "#fff",
          color: "#5e6d82",
        },
      };
    },
    created() {
       this.toggleExpand(this.treeData, this.expandAll);
    },
    methods: {
      exportImage() {
        const treeOrgEl = this.$refs.treeChart.$el; // 获取 vue3-tree-org 组件的根节点元素
        domToImage.toPng(treeOrgEl) // 转换为 PNG 格式
          .then(function (dataURL) {
            // 创建一个链接元素并设置其下载属性
            const link = document.createElement('a');
            link.href = dataURL;
            link.download = 'tree_image.png';
            // 触发点击链接的事件
            link.click();
            // 清理链接元素
            link.remove();
          })
          .catch(function (error) {
            console.error('导出图片出错:', error);
          });
      },
      exportToPDF() {
        debugger
        const element = document.getElementById('tree-container') // 获取 TreeOrg 组件的容器元素
        const options = {
          filename: 'tree-structure.pdf', // 导出的文件名，可以根据实际需求更改
          jsPDF: { format: 'letter' }
        }

        html2pdf().set(options).from(element).save();
      },
      onExpand(e, data) {
        console.log(e, data);
      },
      onExpandAll(b) {
        console.log(b)
      },

      expandChange() {
        // this.toggleExpand(this.data, this.expandAll);
      },
      toggleExpand(data, val) {
        if (Array.isArray(data)) {
          data.forEach((item) => {
            item.expand = val
            if (item.childrens) {
              this.toggleExpand(item.childrens, val);
            }
          });
        } else {
          data.expand = val
          if (data.childrens) {
            this.toggleExpand(data.childrens, val);
          }
        }
      },
    },
  };
  </script>