如何在使用 OrgChart.Js 库和 Laravel 时导出用户详细信息 pdf

Question

嘿，开发人员，我在使用 OrgChart.Js 库时遇到一些问题

我能够成功创建我的树层次结构系统，如屏幕截图中所示

现在这是我在 Laravel 11 控制器中使用的示例代码

public function showHierarchy()
{
    // Fetch the admin (role_id = 3)
    $admin = User::where('role_id', 3)->first();
    if (!$admin) {
        return 'No admin found!';
    }

    // Prepare the nodes array to pass to the view
    $nodes = [];

    // Fetch profile picture for admin
    $adminProfile = Profile::where('user_id', $admin->id)->first();
    $adminPic = $adminProfile ? $adminProfile->profile_pic : 'default.jpg';

    // Add Admin to nodes
    $nodes[] = [
        'id' => $admin->id,
        'name' => $admin->first_name . ' ' . $admin->last_name,
        'role' => 'Admin',
        'img' => asset($adminPic),
        'email' => $admin->email,
        'date_of_birth' => $adminProfile ? $adminProfile->date_of_birth : 'N/A',
        'date_of_joining' => $adminProfile ? $adminProfile->date_of_joining : 'N/A',
        'reporting_person' => 'N/A', // Admin has no reporting person
        'personal_number' => $adminProfile ? $adminProfile->personal_number : 'N/A',
        'address' => $adminProfile ? $adminProfile->address : 'N/A',
        'pid' => 0  // Admin is the root node

    ];

    // Fetch all users who have valid values for both team_id and team_rank
    $users = User::whereNotNull('team_id')
                  ->whereNotNull('team_rank')
                  ->where('id', '!=', $admin->id)
                  ->get();

    foreach ($users as $user) {
        // Fetch profile picture for each user
        $userProfile = Profile::where('user_id', $user->id)->first();
        $userPic = $userProfile ? $userProfile->profile_pic : 'default.jpg';
          // Fetch the reporting person (manager)
        $reportingPerson = User::where('id',$user->team_lead_id)->first();
        // dd($reportingPerson->first_name);
        // $reportingName = $reportingPerson ? $reportingPerson->first_name . ' ' . $reportingPerson->last_name : 'N/A';
        $reportingName = '';
        if ($user->team_lead_id == 0) {
            $reportingName = $admin->first_name . ' ' . $admin->last_name;
            $parentId = $admin->id;
        } else {
            $reportingPerson = User::find($user->team_lead_id);
            $reportingName = $reportingPerson ? $reportingPerson->first_name . ' ' . $reportingPerson->last_name : 'N/A';
            $parentId = $reportingPerson ? $reportingPerson->id : $admin->id;
        }

        // Determine the parent node (pid)
        // If the user has team_lead_id = 0, the user reports directly to the admin
        // Otherwise, the user reports to the person defined in team_lead_id (only if team_id is the same)
        if ($user->team_lead_id == 0) {
            // If team_lead_id is 0, user reports directly to admin
            $parentId = $admin->id;
        } else {
            // Check if the person in team_lead_id belongs to the same team (team_id)
            $teamLead = User::where('id', $user->team_lead_id)
                            ->where('team_id', $user->team_id)  // Ensure same team
                            ->first();

            // If team_lead_id is valid, use it as parent; else, default to admin
            if ($teamLead) {
                $parentId = $teamLead->id;  // Reports to team lead in the same team
            } else {
                $parentId = $admin->id;  // If no valid team lead, report to admin
            }
        }

        // Determine the user's role based on team_rank
        $role = ($user->team_rank == 1) ? 'Manager' : (($user->team_rank == 3) ? 'Team Lead' : 'Team Member');

        // Add user to the nodes array
        $nodes[] = [
            'id' => $user->id,
            'pid' => $parentId,
            'name' => $user->first_name . ' ' . $user->last_name,
            'role' => $role,
            'img' => asset($userPic),
            'email' => $user->email,
            'date_of_birth' => $userProfile ? $userProfile->date_of_birth : 'N/A',
            'date_of_joining' => $userProfile ? $userProfile->date_of_joining : 'N/A',
            'reporting_person' => $reportingName,
            'personal_number' => $userProfile ? $userProfile->personal_number : 'N/A',
            'address' => $userProfile ? $userProfile->address : 'N/A'
        ];
    }
    // dd($nodes);
    return view('test', compact('nodes'));
}

这是我用来制定树结构的 Js

<script>
    const chart = new OrgChart(document.getElementById("tree"), {
        template: "isla", // Template for the tree nodes
        // template: "rony", // Template for the tree nodes
        nodeBinding: {
            field_0: "name", // Bind "name" from your data
            field_1: "role", // Bind "role" from your data
            img_0: "img",
        },
        nodes: {!! json_encode($nodes) !!}, // Pass the $nodes array from your Laravel controller

        collapse: {
            level: 2, // Collapse nodes below the Manager level
            allChildren: true // Collapse all children under the Managers
        },
        // Layout configuration
        layout: OrgChart.compact,  // Use the compact layout to force horizontal alignment
        siblingSeparation: 30,  // Control horizontal space between nodes
        subTreeSeparation: 40,  // Space between different subtrees (managers)
        nodeSize: [160, 100],  // Define node size to better fit horizontal display

        // Zoom and scroll settings
        zoom: {
            zoomIn: true,
            zoomOut: true,
            fit: true
        },
        mouseScrool: OrgChart.action.scroll,  // Enable scrolling with mouse wheel
        enableSearch: true,  // Enable search functionality
    });
</script>

现在，当我单击任何节点时，我面临的问题就开始了，它会打开一个默认侧面板，如屏幕截图所示

现在，当我单击“下载 pdf”按钮时，它会下载默认模板，但我想通过单击同一 pdf 按钮来下载自定义 pdf。我想通过单击此按钮下载的 Pdf 存储在这个位置，“resources/views/card.blade.php” 在我的 Laravel 项目中

在该文件中，我想用一些动态数据填充它，例如“Name”，“Image”，“Date_of_Birth”等。所有这些数据都已经从控制器传递，并且当前在侧面板中显示为嗯

Answer 1

您可以删除此按钮，将其设置为空：

editForm: {
    buttons:  {
        pdf: null
    }
}

并添加一个看起来相同的自定义。

以下是图标： https://code.balkan.app/org-chart-js/icons#JS