代碼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>TableExport</title>
    <!--jquery-->
    <script src="https://cdn.bootcss.com/jquery/3.4.0/jquery.min.js"></script>
    <!--bootstrap-->
    <link href="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/popper.js/1.14.7/umd/popper.min.js"></script>
    <script src="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
    <!--fontawesome-->
    <script src="https://cdn.bootcss.com/font-awesome/5.8.1/js/all.min.js"></script>
    <!--bootstrap-table-->
    <link href="https://cdn.bootcss.com/bootstrap-table/1.14.2/bootstrap-table.min.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/bootstrap-table/1.14.2/bootstrap-table.min.js"></script>
    <!--bootstrap-table-lanuage-->
    <script src="https://cdn.bootcss.com/bootstrap-table/1.14.2/bootstrap-table-locale-all.min.js"></script>
    <!--bootstrap-table-export-->
    <script src="https://cdn.bootcss.com/bootstrap-table/1.14.2/extensions/export/bootstrap-table-export.min.js"></script>
    <!--在客戶端保存生成的導出文件-->
    <script src="https://cdn.bootcss.com/FileSaver.js/2014-11-29/FileSaver.min.js"></script>
    <!--以XLSX（Excel 2007+ XML格式）格式導出表（SheetJS）-->
    <script src="https://cdn.bootcss.com/xlsx/0.14.2/xlsx.core.min.js"></script>
    <!--以PNG格式導出表格-->
    <!--對於IE支持包括 html2canvas 之前的 es6-promise-->
    <script src="https://cdn.bootcss.com/es6-promise/4.1.1/es6-promise.auto.min.js"></script>
    <script src="https://cdn.bootcss.com/html2canvas/0.5.0-beta4/html2canvas.min.js"></script>
    <!--將表導出為PDF文件-->
    <script src="https://unpkg.com/tableexport.jquery.plugin/libs/jsPDF/jspdf.min.js"></script>
    <script src="https://unpkg.com/tableexport.jquery.plugin/libs/jsPDF-AutoTable/jspdf.plugin.autotable.js"></script>
    <!--無論期望的格式如何，最后都包含 tableexport.jquery.plugin（不是tableexport）-->
    <script src="https://unpkg.com/tableexport.jquery.plugin/tableExport.min.js"></script>
</head>
<body>
<div class="container">
    <div id="toolbar">
        <select class="form-control">
            <option value="">Export Basic</option>
            <option value="all">Export All</option>
            <option value="selected">Export Selected</option>
        </select>
    </div>
    <button type="button" onclick="exportData()" class='btn btn-mini btn-info'>導出</button>
    <table id="table" data-locale="zh-CN"></table>
</div>
<script>
    $(function () {
        $.ajax({
            url: "https://examples.bootstrap-table.com/json/data1.json?order=asc",
            success: function (result) {
                // 初始化表格
                $('#toolbar').find('select').change(function () {
                    $('#table').bootstrapTable('destroy').bootstrapTable({
                        data: result,
                        pagination: true,//顯示分頁
                        clickToSelect: true,//單擊列表選中
                        toolbar: "#toolbar",//顯示工具欄
                        showToggle: true,//工具欄上顯示列表模式切換
                        showExport: true,//工具欄上顯示導出按鈕
                        exportDataType: $(this).val(),//顯示導出范圍
                        exportTypes: ['json', 'xml', 'png', 'csv', 'txt', 'sql', 'doc', 'excel', 'xlsx', 'pdf'],//導出格式
                        exportOptions: {//導出設置
                            fileName: 'Tablexxx',//下載文件名稱
                        },
                        columns: [
                            {
                                field: 'state',
                                checkbox: true,
                                visible: $(this).val() === 'selected'
                            },
                            {
                                field: 'id',
                                title: 'ID'
                            }, {
                                field: 'name',
                                title: 'Item Name'
                            }, {
                                field: 'price',
                                title: 'Item Price'
                            }
                        ]
                    })
                }).trigger('change');
            }
        });
    })
    // 自定義按鈕導出數據
    function exportData(){
        $('#table').tableExport({
            type: 'excel',
            exportDataType: "all",
            ignoreColumn: [0],//忽略某一列的索引
            fileName: 'Tablexxx',//下載文件名稱
            onCellHtmlData: function (cell, row, col, data){//處理導出內容,自定義某一行、某一列、某個單元格的內容
                console.info(data);
                return data;
            },
        });
    }
</script>
</body>
</html>

結果

bootstrap-table-export：https://bootstrap-table.com/docs/extensions/export/

tableexport.jquery.plugin CDN：https://unpkg.com/tableexport.jquery.plugin/

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 BootstrapTable-加載數據 bootstrapTable 刷新數據 bootstrapTable:獲取選中行的數據 bootstrapTable bootstrapTable bootstrapTable的數據后端分頁排序 bootstrapTable insertRow 新增行保留原數據【筆記】BootstrapTable帶參數刷新數據的坑 bootstraptable+tableExport 簡易導出功能+datetimepicker 日期時間函數 bootstrapTable定時刷新（只刷新數據）