yajra / laravel-datatables

jQuery DataTables API for Laravel
https://yajrabox.com/docs/laravel-datatables
MIT License
4.75k stars 858 forks source link

Arabic characters displaying as boxes in the exported PDF file #3185

Open AmjadGhzlangit opened 4 days ago

AmjadGhzlangit commented 4 days ago

Screenshot 2024-10-21 155409

public function html(): HtmlBuilder { $buttonClass = 'btn mx-2 px-4 py-3 mt-0'; $addRoute = route('dashboard.users.create');

    $buttons = [
        Button::make('colvis')->addClass($buttonClass . ' btn-success')->text(__('Column Visibility')),
        [
            'extend' => 'collection',
            'text' => __('Export'),
            'className' => $buttonClass . ' btn-warning',
            'buttons' => [
                [
                    'extend' => 'csv',
                    'text' => __('CSV'),
                    'className' => $buttonClass,
                    'exportOptions' => [
                        'columns' => [0, 1, 2, 3, 4], 
                    ],
                ],
                [
                    'extend' => 'pdf',
                    'text' => __('PDF'),
                    'className' => $buttonClass,
                    'exportOptions' => [
                        'columns' => [0, 1, 2, 3, 4], 
                    ],
                    'orientation' => 'landscape', 

                    'title' => __('User List'), 
                    'customize' => 'function (doc) {

                        doc.styles.title = {
                            fontSize: 20,
                            fontFamily :"Impact,Charcoal,sans-serif",
                            alignment: "center"
                        };
                        doc.styles.tableHeader = {
                            fillColor: "#7367f0",
                            color: "white"
                        };

                        doc.content[1].table.widths = ["*", "*", "*", "*", "*"];
                    }', 
                ],
                [
                    'extend' => 'print',
                    'text' => __('Print'),
                    'className' => $buttonClass,
                    'exportOptions' => [
                        'columns' => [0, 1, 2, 3, 4], // Specify which columns to print

                    ],
                    'customize' => 'function (win) {
                        $(win.document.body)
                            .css("font-size", "10pt")
                            .prepend("<h3>'.__('Admin List').'</h3>"); // Add a title to the print view

                        $(win.document.body).find("table")
                            .addClass("display")
                            .css("font-size", "inherit");
                    }',
                ],
            ],
        ],

    ];
    if (auth()->user()->can('create-users')) {
        $buttons[] = [
            'text' => __('Create'),
            'className' => $buttonClass . ' btn-primary',
            'action' => 'function (e, dt, node, config) { window.location.href = "' . $addRoute . '"; }',
        ];
    }
    return $this->builder()
        ->setTableId('users-table')
        ->addTableClass('dt-responsive')
        ->columns($this->getColumns())
        ->minifiedAjax()
        ->orderBy(0)
        ->responsive(true)
        ->stateSave(true)
        ->dom('
            <"card-header border-bottom p-3 d-flex justify-content-between align-items-center"
                <"head-label"><"dt-action-buttons"B>
            >
            <"d-flex justify-content-between align-items-center mx-0 row"
                <"col-sm-12 col-md-6"l><"col-sm-12 col-md-6"fr>
            >
            <"table-responsive"t>
            <"d-flex justify-content-between mx-0 row"
                <"col-sm-12 col-md-6"i><"col-sm-12 col-md-6"p>
            >
        ')
        ->selectStyleSingle()
        ->addAction(['printable' => false, 'exportable' => false, 'className' => 'dt-center', 'title' => trans('Actions')])
        ->buttons($buttons)
        ->language($this->getDataTableLanguageUrl())
        ->addTableClass('table table-bordered table-hover')
        ->initComplete('function () {
            var dt_filter = this.api();
            $(`#users-table thead tr`).clone(true).appendTo(`#users-table thead`);
            $(`#users-table thead tr:eq(1) th`).each(function (i) {
                var column = dt_filter.column(i);
                var title = $(this).text();
                if (column.settings()[0].aoColumns[i].bSearchable) {
                    if (title === "Type") {
                        $(this).html(\'<select class="form-select form-select-sm"><option value="">All</option><option value="admin">Admin</option><option value="supervisor">Supervisor</option><option value="user">User</option></select>\');
                        $(\'select\', this).on(\'change\', function () {
                            var val = $.fn.dataTable.util.escapeRegex($(this).val());
                            column.search(val ? \'\\^\' + val + \'\\$\' : \'\', true, false).draw();
                        });
                    } else {
                        $(this).html(\'<input type="text" class="form-control form-control-sm" placeholder="\' + title + \'" />\');
                        $(\'input\', this).on(\'keyup change\', function () {
                            if (column.search() !== this.value) {
                                column.search(this.value).draw();
                            }
                        });
                    }
                } else {
                    $(this).html(\'\'); // Clear the header for non-searchable columns
                }
            });
            // Disable sorting on the second header row for searchable columns
            $(`#users-table thead tr:eq(1) th`).unbind("click");
        }')
        ->parameters([]);
}
yajra commented 2 days ago

You might be missing a font in the pdf library.