Xuất dữ liệu Excel tùy chỉnh

"use strict";

// Class definition
var KTDatatablesExample = function [] {
    // Shared variables
    var table;
    var datatable;

    // Private functions
    var initDatatable = function [] {
        // Set date data order
        const tableRows = table.querySelectorAll['tbody tr'];

        tableRows.forEach[row => {
            const dateRow = row.querySelectorAll['td'];
            const realDate = moment[dateRow[3].innerHTML, "DD MMM YYYY, LT"].format[]; // select date from 4th column in table
            dateRow[3].setAttribute['data-order', realDate];
        }];

        // Init datatable --- more info on datatables: //datatables.net/manual/
        datatable = $[table].DataTable[{
            "info": false,
            'order': [],
            'pageLength': 10,
        }];
    }

    // Hook export buttons
    var exportButtons = [] => {
        const documentTitle = 'Customer Orders Report';
        var buttons = new $.fn.dataTable.Buttons[table, {
            buttons: [
                {
                    extend: 'copyHtml5',
                    title: documentTitle
                },
                {
                    extend: 'excelHtml5',
                    title: documentTitle
                },
                {
                    extend: 'csvHtml5',
                    title: documentTitle
                },
                {
                    extend: 'pdfHtml5',
                    title: documentTitle
                }
            ]
        }].container[].appendTo[$['#kt_datatable_example_buttons']];

        // Hook dropdown menu click event to datatable export buttons
        const exportButtons = document.querySelectorAll['#kt_datatable_example_export_menu [data-kt-export]'];
        exportButtons.forEach[exportButton => {
            exportButton.addEventListener['click', e => {
                e.preventDefault[];

                // Get clicked export value
                const exportValue = e.target.getAttribute['data-kt-export'];
                const target = document.querySelector['.dt-buttons .buttons-' + exportValue];

                // Trigger click event on hidden datatable export buttons
                target.click[];
            }];
        }];
    }

    // Search Datatable --- official docs reference: //datatables.net/reference/api/search[]
    var handleSearchDatatable = [] => {
        const filterSearch = document.querySelector['[data-kt-filter="search"]'];
        filterSearch.addEventListener['keyup', function [e] {
            datatable.search[e.target.value].draw[];
        }];
    }

    // Public methods
    return {
        init: function [] {
            table = document.querySelector['#kt_datatable_example'];

            if [ !table ] {
                return;
            }

            initDatatable[];
            exportButtons[];
            handleSearchDatatable[];
        }
    };
}[];

// On document ready
KTUtil.onDOMContentLoaded[function [] {
    KTDatatablesExample.init[];
}];

Điều này giả định sự quen thuộc cơ bản với DataTables, phần mở rộng nút của nó và khả năng liên quan để xuất dữ liệu bảng sang các định dạng tệp khác nhau, bao gồm cả Excel

Tôi đã viết một số ghi chú tổng quan, nhưng đây là một chủ đề lớn và cần thêm một chút không gian

Ở đây, tôi sẽ tập trung vào tài liệu tham khảo hữu ích khi bạn muốn tùy chỉnh xuất Excel

Cụ thể hơn, tôi sẽ chỉ xem xét các tệp Office Open XML [

1
2
3
4
1]. Các tệp
1
2
3
4
2 cũ hơn [tối đa Excel 2003] sử dụng định dạng khác và không được xem xét ở đây

Cấu trúc tệp Excel

Tài liệu tham khảo chính thức của Microsoft về cấu trúc tệp Excel có tại đây

Excel [. xlsx] Phần mở rộng cho Định dạng tệp ML Bảng tính XML mở của Office

Có thể tìm thấy các tiêu chuẩn cơ bản mà các tiện ích mở rộng trên dựa vào tại đây

ECMA-376 - Định dạng tệp Office Open XML

Tóm lại, tệp Excel là tệp zip chứa một loạt thư mục con và tài liệu XML

Sử dụng danh pháp Open Office, tệp zip là một “gói” chứa “các phần” [tệp XML] và các tệp tùy chọn khác, chẳng hạn như tệp đồ họa

Chúng ta sẽ xem xét một phiên bản rất đơn giản của cấu trúc đó, như được sử dụng bởi DataTables

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
{
    "_rels": {
        ".rels": xml
    },
    "xl": {
        "_rels": {
            "workbook.xml.rels": xml
        },
        "workbook.xml": xml,
        "styles.xml": xml,
        "worksheets": {
            "sheet1.xml": xml
        }

    },
    "[Content_Types].xml": xml
}

DataTables xây dựng một tệp Excel mặc định từ một loạt các chuỗi XML được mã hóa cứng thành tài nguyên JavaScript sau

https. //cdn. bảng dữ liệu. lưới/nút/1. 6. 5/js/nút. html5. js

Tìm kiếm

1
2
3
4
3 để tự mình xem những thứ này. Ví dụ, ở đây bạn sẽ thấy 68 kiểu ô dựng sẵn được xác định trước mà bạn có thể tham khảo khi xuất dữ liệu DataTables

Loại nội dung

Tệp

1
2
3
4
4 chứa danh sách các bộ phận khác nhau trong gói, cùng với loại của từng bộ phận - ví dụ

1
2
PartName="/xl/workbook.xml"
ContentType="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet.main+xml"

Các mối quan hệ

Tệp

1
2
3
4
5 chứa một bộ ID mối quan hệ. Sau đó, chúng được sử dụng để xác định mối quan hệ giữa các phần khác nhau trong gói

Cũng như tệp

1
2
3
4
6 cấp cao nhất, có thể có các tệp khác - chẳng hạn như tệp
1
2
3
4
7 được hiển thị ở trên, tệp này có thể chứa các mối quan hệ với các phần khác của nội dung tổng thể, chẳng hạn như
1
2
3
4
8,
1
2
3
4
9,
1
2
3
4
40, v.v.

Một ví dụ là

1
2
3
4
1
2
3
4
4

Sách bài tập

Tệp

1
2
3
4
41 chứa danh sách các trang tính

1
2
3
4
8
1
2
3
4
9

Ở đây chúng ta có thể thấy ID mối quan hệ

1
2
3
4
42 đang được sử dụng

phong cách

Tệp

1
2
3
4
40 chứa thông tin liên quan đến phông chữ, đường viền, tô màu, căn chỉnh, v.v. Những thứ này sau đó có thể được sử dụng lại ở các địa điểm khác nhau

Một ví dụ

1
2
3
4
2____23

bảng tính

Tệp

1
2
3
4
8 chứa dữ liệu trang tính

{
    "_rels": {
        ".rels": xml
    },
    "xl": {
        "_rels": {
            "workbook.xml.rels": xml
        },
        "workbook.xml": xml,
        "styles.xml": xml,
        "worksheets": {
            "sheet1.xml": xml
        }

    },
    "[Content_Types].xml": xml
}
0
{
    "_rels": {
        ".rels": xml
    },
    "xl": {
        "_rels": {
            "workbook.xml.rels": xml
        },
        "workbook.xml": xml,
        "styles.xml": xml,
        "worksheets": {
            "sheet1.xml": xml
        }

    },
    "[Content_Types].xml": xml
}
1

Hàng và Ô

Trong một hàng chẳng hạn như sau

{
    "_rels": {
        ".rels": xml
    },
    "xl": {
        "_rels": {
            "workbook.xml.rels": xml
        },
        "workbook.xml": xml,
        "styles.xml": xml,
        "worksheets": {
            "sheet1.xml": xml
        }

    },
    "[Content_Types].xml": xml
}
2
{
    "_rels": {
        ".rels": xml
    },
    "xl": {
        "_rels": {
            "workbook.xml.rels": xml
        },
        "workbook.xml": xml,
        "styles.xml": xml,
        "worksheets": {
            "sheet1.xml": xml
        }

    },
    "[Content_Types].xml": xml
}
3

Ý nghĩa của từng phần như sau

MụcMô tả
1
2
3
4
45a hàng
1
2
3
4
46hàng 13
1
2
3
4
47thẻ ô
1
2
3
4
48tham chiếu ô A13
1
2
3
4
49định dạng của ô nằm ở chỉ mục
1
2
3
4
80 12 trong danh sách định dạng
1
2
3
4
81
1
2
3
4
82thuộc tính loại
1
2
3
4
83 cho ô, trong đó
1
2
3
4
84 có nghĩa là "chuỗi chia sẻ", nơi lưu trữ văn bản.
1
2
3
4
85chỉ số của chuỗi là
1
2
3
4
86 - đó là chuỗi thứ 26 trong danh sách chuỗi được chia sẻ

Danh sách các loại

1
2
3
4
83

TypeDescription
1
2
3
4
88boolean
1
2
3
4
89date
1
2
3
4
90error
1
2
3
4
91an inline string [i. e. , không được lưu trữ trong phần chuỗi chia sẻ, nhưng trực tiếp trong ô]
1
2
3
4
92số, được lưu trữ trực tiếp trong ô
1
2
3
4
84chuỗi chia sẻ [vì vậy được lưu trữ trong phần chuỗi chia sẻ chứ không phải trong ô]
1
2
3
4
94a công thức [một chuỗi đại diện cho công thức]

Ví dụ sau đây cho thấy một ô [B2] chứa số 400, được lưu trữ trong chính ô đó

{
    "_rels": {
        ".rels": xml
    },
    "xl": {
        "_rels": {
            "workbook.xml.rels": xml
        },
        "workbook.xml": xml,
        "styles.xml": xml,
        "worksheets": {
            "sheet1.xml": xml
        }

    },
    "[Content_Types].xml": xml
}
4
{
    "_rels": {
        ".rels": xml
    },
    "xl": {
        "_rels": {
            "workbook.xml.rels": xml
        },
        "workbook.xml": xml,
        "styles.xml": xml,
        "worksheets": {
            "sheet1.xml": xml
        }

    },
    "[Content_Types].xml": xml
}
5

Trên đây chỉ là một ví dụ nhỏ về các tùy chọn cấu hình có thể được Excel hỗ trợ

Tài liệu

Tùy chọn Excel

Trang sau liệt kê các tùy chọn chính có thể được đính kèm với nút xuất Excel

https. //dữ liệu. mạng/tham chiếu/nút/excel

Các mục lưu ý là

  • 1
    2
    3
    4
    
    95 - cung cấp quyền truy cập cấp thấp vào tệp Excel, nơi có thể thực hiện các tùy chỉnh - thường bằng cách thao tác trực tiếp các cấu trúc XML được mô tả trong các phần trước của bài đăng này
  • 1
    2
    3
    4
    
    96 - xem phần
    1
    2
    3
    4
    
    97 bên dưới để biết chi tiết
  • 1
    2
    3
    4
    
    98 và
    1
    2
    3
    4
    
    99 - đối với tệp Excel
  • 1
    2
    3
    4
    
    20 và
    1
    2
    3
    4
    
    21 - có bao gồm đầu trang và chân trang của bảng hay không
  • 1
    2
    3
    4
    
    22 và
    1
    2
    3
    4
    
    23 - dòng dữ liệu bổ sung được đưa vào bảng tính
  • 1
    2
    3
    4
    
    24 - Tên trang tính Excel
  • 1
    2
    3
    4
    
    25 - được thêm vào trang tính Excel. Xem phần
    1
    2
    3
    4
    
    26 bên dưới để biết chi tiết

Ví dụ

{
    "_rels": {
        ".rels": xml
    },
    "xl": {
        "_rels": {
            "workbook.xml.rels": xml
        },
        "workbook.xml": xml,
        "styles.xml": xml,
        "worksheets": {
            "sheet1.xml": xml
        }

    },
    "[Content_Types].xml": xml
}
6
{
    "_rels": {
        ".rels": xml
    },
    "xl": {
        "_rels": {
            "workbook.xml.rels": xml
        },
        "workbook.xml": xml,
        "styles.xml": xml,
        "worksheets": {
            "sheet1.xml": xml
        }

    },
    "[Content_Types].xml": xml
}
7

Ở đây, các tùy chọn như

1
2
3
4
98 cũng có thể là các hàm

{
    "_rels": {
        ".rels": xml
    },
    "xl": {
        "_rels": {
            "workbook.xml.rels": xml
        },
        "workbook.xml": xml,
        "styles.xml": xml,
        "worksheets": {
            "sheet1.xml": xml
        }

    },
    "[Content_Types].xml": xml
}
4
{
    "_rels": {
        ".rels": xml
    },
    "xl": {
        "_rels": {
            "workbook.xml.rels": xml
        },
        "workbook.xml": xml,
        "styles.xml": xml,
        "worksheets": {
            "sheet1.xml": xml
        }

    },
    "[Content_Types].xml": xml
}
9

Dữ liệu đã xuất

Trang sau đây bao gồm nhiều cách khác nhau để kiểm soát dữ liệu cụ thể nào được xuất từ ​​DataTable sang Excel

https. //dữ liệu. mạng/tham chiếu/api/nút. xuất dữ liệu[]

Nếu các tùy chọn xuất được cung cấp như một phần của cấu hình nút DataTable, thì bạn sử dụng tùy chọn

1
2
3
4
28 được đề cập trong phần trước

Nếu bạn dùng cái này như một bộ xử lý độc lập thì bạn dùng hàm

1
2
3
4
29 như sau

1
2
3
4
8
1
2
1

Các mục lưu ý là

  • 1
    2
    3
    4
    
    30 - bộ chọn hàng
  • 1
    2
    3
    4
    
    31 - bộ chọn cột
  • 1
    2
    3
    4
    
    32 - bao gồm dữ liệu trực giao nào
  • 1
    2
    3
    4
    
    33 - loại bỏ HTML theo mặc định
  • 1
    2
    3
    4
    
    34 - loại bỏ các dòng mới theo mặc định
  • 1
    2
    3
    4
    
    35 - các chức năng định dạng ô khác nhau - xem bên dưới

Đối với tùy chọn

1
2
3
4
35, bạn có thể cung cấp các chức năng khác nhau như sau

1
2
2____73

Mục lưu ý

  • 1
    2
    3
    4
    
    37 - định dạng dữ liệu tiêu đề
  • 1
    2
    3
    4
    
    38 - định dạng dữ liệu chân trang
  • 1
    2
    3
    4
    
    39 - định dạng dữ liệu cơ thể
  • {
        "_rels": {
            ".rels": xml
        },
        "xl": {
            "_rels": {
                "workbook.xml.rels": xml
            },
            "workbook.xml": xml,
            "styles.xml": xml,
            "worksheets": {
                "sheet1.xml": xml
            }
    
        },
        "[Content_Types].xml": xml
    }
    
    00 - cơ hội cuối cùng để tùy chỉnh dữ liệu tổng thể. Thay đổi đối tượng
    {
        "_rels": {
            ".rels": xml
        },
        "xl": {
            "_rels": {
                "workbook.xml.rels": xml
            },
            "workbook.xml": xml,
            "styles.xml": xml,
            "worksheets": {
                "sheet1.xml": xml
            }
    
        },
        "[Content_Types].xml": xml
    }
    
    01 chứa mảng
    1
    2
    3
    4
    
    20, mảng
    1
    2
    3
    4
    
    21 và mảng 2D
    {
        "_rels": {
            ".rels": xml
        },
        "xl": {
            "_rels": {
                "workbook.xml.rels": xml
            },
            "workbook.xml": xml,
            "styles.xml": xml,
            "worksheets": {
                "sheet1.xml": xml
            }
    
        },
        "[Content_Types].xml": xml
    }
    
    04. Không có giá trị trả lại nào được sử dụng

Xuất thông tin

Trang sau bao gồm các tùy chọn có thể phổ biến đối với nhiều nút cho một bảng

https. //dữ liệu. mạng/tham chiếu/api/nút. exportInfo[]

Như vậy, các tùy chọn có sẵn ở đây chồng chéo với một số tùy chọn được trình bày trong phần “Tùy chọn Excel” ở trên - ví dụ:

  • 1
    2
    3
    4
    
    98 và
    1
    2
    3
    4
    
    99 - đối với tệp Excel
  • 1
    2
    3
    4
    
    22 và
    1
    2
    3
    4
    
    23 - dòng dữ liệu bổ sung được đưa vào bảng tính
  • 1
    2
    3
    4
    
    25 - được thêm vào trang tính Excel. Theo mặc định, điều này sẽ sử dụng giá trị
    {
        "_rels": {
            ".rels": xml
        },
        "xl": {
            "_rels": {
                "workbook.xml.rels": xml
            },
            "workbook.xml": xml,
            "styles.xml": xml,
            "worksheets": {
                "sheet1.xml": xml
            }
    
        },
        "[Content_Types].xml": xml
    }
    
    10 của trang web

Điều này thường được sử dụng bên ngoài nút hoặc với nút tùy chỉnh

Thay đổi cấp thấp

Xem xét tùy chọn nút sau

{
    "_rels": {
        ".rels": xml
    },
    "xl": {
        "_rels": {
            "workbook.xml.rels": xml
        },
        "workbook.xml": xml,
        "styles.xml": xml,
        "worksheets": {
            "sheet1.xml": xml
        }

    },
    "[Content_Types].xml": xml
}
2
1
2
5

Điều này truy cập dữ liệu XML cơ bản cho trang tính Excel. Sau đó, nó sử dụng jQuery để chọn nội dung văn bản của ô A1. Cuối cùng nó cập nhật nội dung đó

Một số ví dụ khác

Thay đổi định dạng của hàng 1

1
2
6
1
2
7

GHI CHÚ. Kể từ jQuery 3. 4, lớp giả

{
    "_rels": {
        ".rels": xml
    },
    "xl": {
        "_rels": {
            "workbook.xml.rels": xml
        },
        "workbook.xml": xml,
        "styles.xml": xml,
        "worksheets": {
            "sheet1.xml": xml
        }

    },
    "[Content_Types].xml": xml
}
11 không được dùng nữa. Xóa nó khỏi bộ chọn của bạn và lọc kết quả sau bằng cách sử dụng
{
    "_rels": {
        ".rels": xml
    },
    "xl": {
        "_rels": {
            "workbook.xml.rels": xml
        },
        "workbook.xml": xml,
        "styles.xml": xml,
        "worksheets": {
            "sheet1.xml": xml
        }

    },
    "[Content_Types].xml": xml
}
12

Thay đổi định dạng của hàng 3

1
2
6
1
2
9

Thay đổi định dạng của cột B

1
2
6
PartName="/xl/workbook.xml"
ContentType="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet.main+xml"
1

CẢNH BÁO - nếu bảng tính của bạn có đủ cột, bạn có thể thấy điều này cũng chọn cột BA, BB, v.v.

Thay đổi bất kỳ hàng nào có số hàng chứa số 3 [3, 13, 23, 30, 31…]

1
2
6
PartName="/xl/workbook.xml"
ContentType="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet.main+xml"
3

Lấy cột cuối cùng trong trang tính

1
2
6
PartName="/xl/workbook.xml"
ContentType="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet.main+xml"
5

Đây là một ví dụ lưu giữ các số rất dài dưới dạng văn bản [chứ không phải, ví dụ, dưới dạng số trong ký hiệu khoa học]

https. // stackoverflow. com/a/52047216/12567365

Đây là một ví dụ có thêm một bộ định dạng ô mới

PartName="/xl/workbook.xml"
ContentType="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet.main+xml"
6
PartName="/xl/workbook.xml"
ContentType="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet.main+xml"
7

Ví dụ sau minh họa việc tạo thêm sheet trong file Excel được tạo từ Datatables

https. //ý chính. github. com/northcoder-repo/05bde971c7879ea5ebc4907f323376fc

Nút tùy chỉnh

Bạn có thể tạo các nút tùy chỉnh hoàn toàn

https. //dữ liệu. net/tiện ích mở rộng/nút/tùy chỉnh

https. //dữ liệu. mạng/tham chiếu/tùy chọn/nút. nút. hoạt động

Xem xét điều này

PartName="/xl/workbook.xml"
ContentType="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet.main+xml"
8

Nó sử dụng phương thức JavaScript

{
    "_rels": {
        ".rels": xml
    },
    "xl": {
        "_rels": {
            "workbook.xml.rels": xml
        },
        "workbook.xml": xml,
        "styles.xml": xml,
        "worksheets": {
            "sheet1.xml": xml
        }

    },
    "[Content_Types].xml": xml
}
13 để gọi một hàm

Như được sử dụng ở đây, nó cho phép chúng tôi cung cấp chế độ bật lên "vui lòng đợi" tùy chỉnh [

{
    "_rels": {
        ".rels": xml
    },
    "xl": {
        "_rels": {
            "workbook.xml.rels": xml
        },
        "workbook.xml": xml,
        "styles.xml": xml,
        "worksheets": {
            "sheet1.xml": xml
        }

    },
    "[Content_Types].xml": xml
}
14 là SweetAlert2]

Chủ Đề