Xuất bảng html sang excel bằng javascript với css

Làm cách nào để xuất/tải bảng HTML sang Excel bằng Javascript?

Đăng vào ngày 1 tháng 8 năm 20207 Ngày tháng 5 năm 2022 bởi RevisitClass

nội dung

bảng HTML

HTML providing the

tag to show the data in row and column format. We might have seen those tables in several web pages. Example: Stock Price list,Employee salary reports, Student marks report and so on. The below image is showing the corona cases report in HTML table format.

Xuất bảng html sang excel bằng javascript với css
Báo cáo trường hợp Corona trong bảng HTML

Nếu chúng tôi có tùy chọn tải xuống các bảng đó trong excel, Sẽ rất hữu ích khi phân tích dữ liệu. Hãy tạo bảng mẫu bằng HTML và bật tùy chọn tải xuống bằng Javascript

mảng Javascript

Mảng Javascript được sử dụng để lưu trữ tập hợp các giá trị trong một biến duy nhất. Như chúng ta đã biết, bảng HTML có một tập hợp các hàng và cột. Chúng ta có thể thêm các giá trị đó vào mảng. Sau đó, các dấu phân cách sẽ được thêm vào cho từng giá trị hàng và cột để tạo bản ghi excel

var result = ['Công ty','Nhóm','Giá trị trước đó','Giá trị hiện tại']

  • Mỗi hàng trong bảng được phân cách bằng ký tự dòng mới (\n)
  • Mỗi cột trong bảng được phân cách bằng dấu phẩy (,)

Thí dụ. Tải xuống bảng HTML trong Excel (. định dạng csv)

Trong ví dụ này, chúng ta sẽ tạo bảng giá cổ phiếu bằng nút tải xuống – Để xuất bảng dưới dạng tệp csv

Bước 1. Tạo bảng HTML

Đoạn mã HTML dưới đây tạo bảng giá cổ phiếu

– Xác định bảng HTML chứa tập hợp các giá trị hàng và cột
  • – Nó tạo phần tử hàng trong bảng
  • – Giá trị ô tiêu đề được tạo trong thẻ này
  • – Xác định ô/cột dữ liệu của bảng

    1

    2

    3

    4

    5

    6

    7

    8

    9

    10

    11

    12

    13

    14

    15

    16

    17

    18

    19

    20

    21

    22

    23

    24

    25

    26

    27

    28

    29

    30

    31

    32

    33

    34

    35

    36

    37

    38

    39

    <html>

    <đầu>

        <tiêu đề>Xuất HTML data to excel </title>

        <h2>Hoa Kỳ NASDAQ Stocks price list </h2>

    </đầu>

    <nội dung>

            <bảng id="tblStocks" cellpadding="0" cellspacing="0">

                <tr>

                            <th>Công ty</th>

                            <th>Nhóm</th>

                            <th>Trước Close($)</th>

                            <th>Hiện tại Price($)</th>

                            <th>Thay đổi(%)</th>

                  </tr>

                  <tr>

                            <td>Cuộc sống HealthCare INC</td>

                            <td>A</td>

                    <td>35. 58</td>

                            <td>38. 45</td>

                            <td>+8.06</td>

                  </tr>

                  <tr>

                            <td>Den Networks Ltd</td>

                            <td>A</td>

                            <td>72. 55</td>

                            <td>77. 60</td>

                            <td>+6.96</td>

                  </tr>

                  <tr>

                            <td>RMG Cements</td>

                            <td>B</td>

                            <td>140</td>

                            <td>135</td>

                            <td>-3.57</td>

                  </tr>

            </bảng>

            <br />

    </body>

    </html>

    Xuất bảng html sang excel bằng javascript với css
    Ví dụ về bảng HTML

    Bước 2. Thêm thuộc tính CSS để tạo kiểu cho bảng

    In the HTML code, id (tblStocks) is defined for the

    tag. For that id, We can add the CSS properties (margin,colour,font style) which will change the table style.

    1

    2

    3

    4

    5

    6

    7

    8

    9

    10

    11

    12

    13

    14

    15

    16

    17

    18

    19

    20

    21

    22

    23

    24

            #tblStocks {

              họ phông chữ. "Trebuchet MS", Arial, Helvetica, sans-serif;

              sụp đổ biên giới. sụp đổ;

              chiều rộng. 100%;

            }

     

            #tblStocks td, #tblStocks th {

              đường viền. 1px rắn #ddd;

              phần đệm. 8px;

            }

     

            #tblStocks tr. con thứ n(thậm chí){màu nền. #f2f2f2;}

     

            #tblStocks tr. di chuột {màu nền. #ddd;}

     

            #tblStocks th {

                phần đệm. 12px;

                padding-bottom. 12px;

                căn chỉnh văn bản. trái;

                màu nền. #294c67;;

                màu. trắng;

              }

          

    Xuất bảng html sang excel bằng javascript với css
    Bảng HTML có thuộc tính CSS

    Bước 3. Tạo nút tải xuống

    Bootstrap cung cấp các biểu tượng đồ họa từ bộ Glyphicon Halflings. Hãy tạo nút có biểu tượng tải xuống bằng Glyphicons

    1

    2

    3

    4

    5

    <liên kết rel="biểu định kiểu" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">

    <nút>

       <span class="glyphicon glyphicon-download"></span>

       Tải xuống danh sách

    </nút>

    Xuất bảng html sang excel bằng javascript với css
    Thêm nút tải xuống bằng Glyphicon

    Bước 4. Triển khai chức năng Javascript để tải xuống bảng HTML trong tệp CSV

    • Get the HTML table into Javascript variable using id “tblStocks” which is assigned for
    tag.
  • Lặp qua biến để tìm nạp các giá trị ô và thêm các giá trị đó vào mảng javascript. Ở đây chúng ta có mảng bên trong một mảng có nghĩa là mảng bên ngoài chứa số hàng và mỗi mảng bên trong chứa số cột cho mỗi hàng
  • 1

    2

    3

    4

    hàng = [

    [cột1,cột2,column3,column4,column5],

    [cột1,cột2,column3,column4,column5],.. .

    ]

    1

    2

    3

    4

    5

    6

    7

    8

    9

    10

    11

    12

    13

    14

    15

    16

    17

    18

    19

    20

    21

    22

    23

    24

    25

    26

    27

    28

    29

    30

    31

    32

    33

    34

    35

    36

    37

    38

    39

    40

    41

    42

    43

    44

    45

    chức năng xuất dữ liệu(){

        /* Nhận dữ liệu HTML bằng Phần tử theo Id */

        var bảng = tài liệu.getElementById("tblStocks");

     

        /* Khai báo biến mảng */

        var hàng =[];

     

          //lặp qua các hàng của bảng

        cho(var i=0,row; row = table.hàng[i];i++){

            //các hàng sẽ được truy cập bằng cách sử dụng biến "hàng" được chỉ định trong vòng lặp for

            //Lấy từng giá trị ô/cột từ hàng

            cột1 = hàng. ô[0]. Văn bản bên trong;

            cột 2 = hàng. ô[1]. Văn bản bên trong;

            cột 3 = hàng. ô[2]. Văn bản bên trong;

            cột 4 = hàng. ô[3]. Văn bản bên trong;

            cột 5 = hàng. ô[4]. Văn bản bên trong;

     

        /* thêm bản ghi mới vào mảng */

            hàng. đẩy(

                [

                    cột1,

                    cột 2,

                    cột 3,

                    cột 4,

                    cột 5

                ]

            );

     

            }

            csvContent = "dữ liệu. text/csv;charset=utf-8,";

             /* thêm dấu phân cách cột dưới dạng dấu phẩy (,) và mỗi hàng được phân tách bằng ký tự dòng mới (\n) */

            hàng. forEach(hàm(rowArray){

                row = rowArray. tham gia(",");

                csvContent += hàng + "\r\n";

            });

     

            /* tạo nút DOM

            var encodedUri = encodeURI(csvContent);

            var liên kết = tài liệu.createElement("a");

            liên kết. setAttribute("href", encodedUri);

            liên kết. setAttribute("tải xuống", "Stock_Price_Report.csv");

            tài liệu. cơ thể. appendChild(liên kết);

             /* tải xuống tệp dữ liệu có tên "Stock_Price_Report. csv" */

            liên kết. nhấp chuột();

    }

    Bước 5. Gọi hàm Javascript bằng sự kiện onclick

    Here we have created the javascript function in different file which named as “downloadFile.js”. Include that file in HTML using type="text/javascript" src="downloadFile.js">

    Cuối cùng tạo sự kiện onclick cho nút Download List để gọi hàm javascript exportData()

    1

    2

    3

    4

    <nút onclick="exportData()">

        <span class="glyphicon glyphicon-download"></span>

        Tải xuống danh sách

    </nút>

    Như bạn có thể thấy bên dưới, bảng HTML được tải xuống trong tệp csv(Stock_Price_Report. csv) khi người dùng nhấp vào nút Tải xuống danh sách