Laravel结合OrgChart.js实现自定义用户详情PDF导出方案

步骤1：安装PDF生成依赖 #

使用Laravel常用的barryvdh/laravel-dompdf包渲染Blade模板并生成PDF，执行安装命令：

composer require barryvdh/laravel-dompdf

步骤2：编写PDF生成控制器方法 #

在对应控制器（比如UserController）中添加方法，负责获取用户数据、渲染自定义模板并返回PDF下载：

<?php

namespace App\Http\Controllers;

use App\Models\User;
use Barryvdh\DomPDF\Facade\Pdf;
use Illuminate\Http\Request;

class UserController extends Controller
{
    public function generateUserPdf(Request $request)
    {
        // 通过ID获取用户数据，确保数据存在
        $user = User::findOrFail($request->input('user_id'));

        // 加载自定义Blade模板并传入用户动态数据
        $pdf = Pdf::loadView('card', compact('user'));

        // 以用户姓名作为PDF文件名触发下载
        return $pdf->download("{$user->name}_个人档案.pdf");
    }
}

步骤3：配置路由 #

在routes/web.php中添加PDF生成的路由：

Route::get('/user/export-pdf', [UserController::class, 'generateUserPdf'])->name('user.export.pdf');

步骤4：修改OrgChart.js的侧边栏按钮事件 #

替换原有默认PDF按钮的点击逻辑，改为调用后端生成PDF的接口，确保传递用户ID参数：

// 初始化OrgChart配置
const orgChart = new OrgChart(document.getElementById("org-tree"), {
    // 其他核心配置...
    sidebar: {
        buttons: [
            {
                text: "下载个人PDF",
                icon: "fa fa-file-pdf-o",
                onClick: function(node) {
                    // 假设node.id对应数据库用户ID，跳转至PDF生成接口
                    window.location.href = "{{ route('user.export.pdf') }}?user_id=" + node.id;
                }
            }
            // 其他侧边栏按钮...
        ]
    }
});

步骤5：完善自定义Blade模板 #

确保resources/views/card.blade.php正确使用传递的$user数据，同时添加适配PDF的样式：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>{{ $user->name }} 个人档案</title>
    <style>
        @page {
            margin: 20mm;
        }
        .profile-card {
            font-family: "Microsoft YaHei", sans-serif;
            line-height: 1.6;
        }
        .avatar {
            width: 120px;
            height: 120px;
            border-radius: 50%;
            object-fit: cover;
            margin: 0 auto;
            display: block;
        }
        .info-item {
            margin: 10px 0;
            font-size: 14px;
        }
        .info-label {
            font-weight: bold;
            margin-right: 8px;
        }
    </style>
</head>
<body>
    <div class="profile-card">
        <h1 style="text-align: center;">{{ $user->name }}</h1>
        <img src="{{ storage_path('app/public/avatars/' . $user->avatar) }}" class="avatar" alt="用户头像">
        <div class="info-item">
            <span class="info-label">出生日期:</span> {{ $user->birth_date->format('Y年m月d日') }}
        </div>
        <div class="info-item">
            <span class="info-label">职位:</span> {{ $user->position }}
        </div>
        <!-- 根据需求添加更多用户字段 -->
    </div>
</body>
</html>

注意事项 #

1. 如果用户头像存储在storage/app/public目录，需执行php artisan storage:link创建软链，确保PDF生成时能读取到图片。
2. 若需要支持中文显示，需确保Dompdf配置中添加了中文字体支持，可参考包文档配置自定义字体。
3. 确保OrgChart节点的id属性与数据库用户ID对应，否则无法正确获取用户数据。

内容的提问来源于stack exchange，提问作者S.K Saxena