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: 600px;">
          <vue3-tree-org
            ref="treeChart"
            :data="treeData"
            center
            :props="{children: 'childrens'}"
            :define-menus="defineMenus"
            :horizontal="horizontal"
            :collapsable="collapsable"
            :label-style="style"
            @on-expand="onExpand"
            @on-node-click="onNodeClick"
          />
      </div>

      <view-dialog ref="viewDialog"/>
  </template>
  <script>


  import { ElSwitch, ElButton, ElMessage } from 'element-plus'
  import html2pdf from 'html2pdf.js'
  import { ref } from 'vue'
  import domToImage from 'dom-to-image';
  import {selectResourceChart} from '@/api/chart'
  import ViewDialog from '@/components/ViewDialog.vue'

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

    },
    data() {
      return {
        treeData:{},
        horizontal: false,
        collapsable: true,
        onlyOneNode: false,
        expandAll: true,
        disaled: false,
        defineMenus:[],
        style: {
          background: "#fff",
          color: "#5e6d82",
        },
      };
    },
    created() {
       selectResourceChart().then(res=>{
         this.treeData = res.data.data;
         this.toggleExpand(res.data.data, this.expandAll);
       })
       .catch(err=>{
        ElMessage.error(err.msg);
       })
    },
    methods: {
      exportImage() {
        const treeOrgEl = this.$refs.treeChart.$el;
        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() {
        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)
      },
      onNodeClick(e, data) {
        this.$refs.viewDialog.openDialog(data);
      },
      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>