Laravel中Vue.js DataTable实现CSV/XLSX导出功能的技术求助

Hey there! Let's get your DataTable export functionality working smoothly. Since you're using jQuery DataTables with Vue.js (and server-side processing in Laravel), we can leverage DataTables' official Buttons extension to handle XLSX and CSV exports with minimal code changes. Here's a step-by-step solution tailored to your existing setup:

Step 1: Add Required Dependencies #

First, you need to include the DataTables Buttons extension and JSZip (for XLSX support). You can use CDNs or npm:

Option A: CDN Links (Quick Setup)

Add these to your blade template or the main HTML file where your Vue app loads:

<!-- DataTables Buttons CSS -->
<link rel="stylesheet" href="https://cdn.datatables.net/buttons/2.4.2/css/buttons.dataTables.min.css">

<!-- DataTables Buttons JS -->
<script src="https://cdn.datatables.net/buttons/2.4.2/js/dataTables.buttons.min.js"></script>
<script src="https://cdn.datatables.net/buttons/2.4.2/js/buttons.html5.min.js"></script>

<!-- JSZip for XLSX Export -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js"></script>

Option B: NPM Install (For Laravel Mix)

If you prefer using npm, install the packages:

npm install jszip datatables.net-buttons datatables.net-buttons-html5

Then import them in your resources/js/app.js:

import 'datatables.net-buttons';
import 'datatables.net-buttons-html5';
import 'jszip';

And add the CSS to resources/sass/app.scss:

@import 'datatables.net-buttons/css/buttons.dataTables.min.css';

Run npm run dev to compile.

Step 2: Update Your Vue Component #

2.1 Add a Data Property to Store the DataTable Instance

In your Vue component's data() method, add a property to hold the DataTable instance:

data(){
    return{
        // Your existing data properties...
        tableInstance: null, // Add this line
    }
},

2.2 Modify the DataTable Initialization

Update the tdatatable() method to include the Buttons configuration, and save the table instance to your Vue data:

tdatatable() {
    let vm = this;
    var initTable = () => {
        var table = $('#list-travel-tbl').DataTable({
            searchDelay: 500,
            scrollX: true,
            scrollCollapse: true,
            processing: true,
            serverSide: true,
            fixedColumns: {
                leftColumns: false,
                rightColumns: 1,
            },
            ajax: {
                url: BASE_URL + '/tracking/listtravel',
                type: 'GET'
            },
            columns: [
                // Your existing columns...
            ],
            columnDefs: [
                // Your existing column definitions...
            ],
            // Add these new configurations
            dom: 'Bfrtip', // Ensures buttons are rendered properly
            buttons: [
                {
                    extend: 'excelHtml5',
                    className: 'd-none', // Hide the default button (we'll use your custom buttons)
                    text: 'Export xlsx',
                    exportOptions: {
                        columns: [0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17], // Exclude the last action column
                        format: {
                            body: function(data, row, column, node) {
                                // Extract plain text from HTML content (like your status labels)
                                return $('<div>').html(data).text().trim();
                            }
                        }
                    }
                },
                {
                    extend: 'csvHtml5',
                    className: 'd-none', // Hide default button
                    text: 'Export csv',
                    exportOptions: {
                        columns: [0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17],
                        format: {
                            body: function(data, row, column, node) {
                                return $('<div>').html(data).text().trim();
                            }
                        }
                    }
                }
            ],
            drawCallback: () => {
                $('.btn-edit').off().on('click', function() {
                    let id = $(this).data('id');
                    vm.show(id);
                });
            }
        });
        // Save the table instance to Vue data
        vm.tableInstance = table;
    };
    return {
        init: function() {
            initTable();
        },
    };
},

2.3 Implement the Export Button Methods

Update your togglexl() and togglecsv() methods to trigger the DataTables export actions:

togglexl(){
    if(this.tableInstance){
        // Trigger the hidden Excel button
        this.tableInstance.button('.buttons-excel').trigger();
    }
},
togglecsv(){
    if(this.tableInstance){
        // Trigger the hidden CSV button
        this.tableInstance.button('.buttons-csv').trigger();
    }
},

Step 3: Test the Export #

Now when you click your custom "Export xlsx" or "Export csv" buttons, DataTables will:

1. Fetch all server-side data (not just the current page)
2. Clean up HTML content to export plain text
3. Generate and download the appropriate file automatically

Optional: Customize Further #

• Change Export Filename: Add a filename property to each button config, e.g., filename: 'travel-data'
• Include/Exclude Columns: Adjust the columns array in exportOptions to pick specific columns by index
• Modify Header Text: Use exportOptions.header to customize column headers in the exported file

内容的提问来源于stack exchange，提问作者Shainnah Jane