Xuất tệp Excel JavaScript

Question

Trong hướng dẫn này, bạn có thể tìm thấy giải pháp về Cách xuất hoặc tải xuống dữ liệu bảng HTML trong trang tính Excel bằng cách sử dụng JavaScript. Xuất dữ liệu sang Excel là tính năng bắt buộc trong ứng dụng web của chúng tôi. Bởi vì chức năng xuất dữ liệu sẽ giúp tải dữ liệu từ ứng dụng web sang định dạng tệp khác để sử dụng dữ liệu ngoại tuyến và đối với định dạng excel này là lý tưởng để xuất dữ liệu trong tệp để sử dụng ngoại tuyến. Có nhiều hướng dẫn chúng tôi đã xuất bản để xuất dữ liệu thành excel ở phía máy chủ bằng cách sử dụng PHP. Nhưng nếu chúng ta có thể thực hiện ở phía máy khách để xuất dữ liệu sang bảng tính Excel, thì nó sẽ giảm tải cho máy chủ. Vì vậy, đối với điều này để xuất dữ liệu sang excel, ở đây chúng tôi sẽ sử dụng JavaScript để thực hiện xuất dữ liệu phía máy khách sang bảng excel

Nội dung chính Show

Các bước để xuất dữ liệu bảng HTML sang Excel bằng JavaScript
1. Dữ liệu bảng HTML
2. Mã JavaScript
Làm cách nào để xuất dữ liệu từ DataTable sang Excel trong JavaScript?
Làm cách nào để xuất sang Excel bằng jquery?
Làm cách nào để truy cập tệp Excel trong JavaScript?
JavaScript có thể được sử dụng cho Excel không?

Tính năng xuất phía máy khách sẽ làm cho ứng dụng web của chúng tôi thân thiện hơn với người dùng. Vì vậy, với sự trợ giúp của JavaScript, chúng tôi có thể xuất dữ liệu bảng HTML sang định dạng Excel mà không cần làm mới trang web. Trong hướng dẫn này, bạn có thể tìm hiểu Cách xuất dữ liệu bảng HTML sang excel bằng JavaScript. Trong hướng dẫn này, chúng tôi sẽ sử dụng Thư viện JavaScript SheetJS để xuất dữ liệu bảng HTML sang Excel

Các bước để xuất dữ liệu bảng HTML sang Excel bằng JavaScript

Dữ liệu bảng HTML
Mã JavaScript

1. Dữ liệu bảng HTML

Để Xuất dữ liệu HTML sang Excel, ở đây trước tiên chúng ta phải tải một số dữ liệu trong bảng HTML. Vì vậy, ở đây chúng tôi đã tạo dữ liệu bảng nhân viên tìm nạp và tải vào bảng HTML với cột bảng như tên, địa chỉ, giới tính, chỉ định và tuổi. Ở đây chúng tôi đã tạo bảng HTML với id employee_data. Vì vậy, id này chúng tôi sẽ sử dụng để tìm nạp dữ liệu bảng HTML này bằng mã JavaScript. Dưới mã HTML này chúng ta đã tạo một thẻ nút có id export_button nên khi sử dụng có click vào nút này thì dữ liệu bảng HTML sẽ được tải xuống ở định dạng tệp Excel mà không cần làm mới trang web bằng JavaScript

Xem bản trình diễn

Tải xuống mã nguồn


<?php

$connect = new PDO("mysql:host=localhost;dbname=testing", "root", "");

$query = "SELECT * FROM tbl_employee ORDER BY name ASC";

$result = $connect->query($query);

?>

<!DOCTYPE HTML>
<html>
<head>
	<meta charset="utf-8" />
	<title>Export HTML table data to excel using JavaScript</title>
	<meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

    <script type="text/javascript" src="https://unpkg.com/[email protected]/dist/xlsx.full.min.js"></script>
</head>
<body>
    <div class="container">
    	<h2 class="text-center mt-4 mb-4">Export HTML table data to excel using JavaScript</h2>
    	<div class="card">
    		<div class="card-header">
    			<div class="row">
    				<div class="col col-md-6">Sample Data</div>
    				<div class="col col-md-6 text-right">
    					<button type="button" id="export_button" class="btn btn-success btn-sm">Export</button>
    				</div>
    			</div>
    		</div>
    		<div class="card-body">
    			<table id="employee_data" class="table table-striped table-bordered">
                    <tr>
                        <th>Name</th>
                        <th>Address</th>
                        <th>Gender</th>
                        <th>Designation</th>
                        <th>Age</th>
                    </tr>
                    <?php
                    foreach($result as $row)
                    {
                        echo '
                        <tr>
                            <td>'.$row["name"].'</td>
                            <td>'.$row["address"].'</td>
                            <td>'.$row["gender"].'</td>
                            <td>'.$row["designation"].'</td>
                            <td>'.$row["age"].'</td>
                        </tr>
                        ';
                    }
                    ?>
                </table>
    		</div>
    	</div>
    </div>
</body>
</html>

2. Mã JavaScript

Trong hướng dẫn này, chúng tôi đã sử dụng Thư viện JavaScript SheetJS để xuất dữ liệu bảng HTML sang Excel bằng JavaScript. Vì vậy, trước tiên chúng ta phải bao gồm liên kết thư viện SheetJS sau ở tiêu đề của trang web HTML này


<script type="text/javascript" src="https://unpkg.com/[email protected]/dist/xlsx.full.min.js"></script>

Trong phần code JavaScript, đầu tiên chúng ta có hàm make html_table_to_excel(type). Chức năng này đã sử dụng chức năng Thư viện SheetJS và chuyển đổi hoặc Viết dữ liệu bảng HTML sang định dạng Excel và tải xuống trong trình duyệt mà không cần làm mới trang web

Khi chức năng đã sẵn sàng thì chúng ta phải gọi hàm html_table_to_excel(type) trên sự kiện nhấp vào nút, vì vậy đối với sự kiện nhấp vào nút kích hoạt, chúng tôi đã sử dụng phương thức addEventListener. Vì vậy, khi người dùng đã nhấp vào nút thì hàm html_table_to_excel(type) đã được gọi với loại tệp xlsx. Vì vậy, nó sẽ tải xuống dữ liệu bảng HTML trong. tệp Excel định dạng xlsx trong trình duyệt mà không cần làm mới trang web ở phía máy khách


function html_table_to_excel(type)
    {
        var data = document.getElementById('employee_data');

        var file = XLSX.utils.table_to_book(data, {sheet: "sheet1"});

        XLSX.write(file, { bookType: type, bookSST: true, type: 'base64' });

        XLSX.writeFile(file, 'file.' + type);
    }

    const export_button = document.getElementById('export_button');

    export_button.addEventListener('click', () =>  {
        html_table_to_excel('xlsx');
    });

Phần kết luận

Hướng dẫn này sẽ giúp bạn thêm tính năng xuất dữ liệu bảng HTML tải xuống trong trang tính Excel mà không cần sử dụng plugin jQuery của bên thứ ba hoặc bất kỳ tập lệnh phía máy chủ nào. Bằng cách làm theo hướng dẫn này, bạn có thể dễ dàng xuất dữ liệu bảng HTML sang Excel bằng cách sử dụng mã JavaScript tối thiểu

Nếu bạn muốn có được nguồn hoàn chỉnh với. sql, vì vậy vui lòng viết địa chỉ email của bạn vào hộp nhận xét. Chúng tôi sẽ gửi cho bạn tệp mã nguồn hoàn chỉnh tại địa chỉ email xác định của bạn

Làm cách nào để xuất dữ liệu từ DataTable sang Excel trong JavaScript?

Javascript hiển thị bên dưới được sử dụng để khởi tạo bảng hiển thị trong ví dụ này. $(tài liệu). sẵn sàng(function() { $('#example'). Bảng dữ liệu ( { dom. 'Bfrtip', các nút. [ 'bản sao', 'csv', 'excel', 'pdf', 'in' ] } ); . .

Sao chép vào clipboard

Lưu dưới dạng Excel (XLSX)

Lưu dưới dạng CSV

Lưu dưới dạng PDF

Hiển thị chế độ xem in

Làm cách nào để xuất sang Excel bằng jquery?

Bây giờ, chúng ta viết hàm exportexcel() như hình bên dưới. .

hàm exportexcel() {

$("#mytable"). bảng2excel({

Tên. "Bảng2Excel",

tên tập tin. "tên tệp của tôi",

fileext. ". xls"

Làm cách nào để truy cập tệp Excel trong JavaScript?

Điều này có thể được thực hiện khá dễ dàng bằng SheetJS. nhập { read, writeFileXLSX, utils } từ "https. //cdn. trang tính. com/xlsx-0. 18. 7/gói/xlsx. mjs"; const workbook = read(data, { type. 'nhị phân', });

JavaScript có thể được sử dụng cho Excel không?

API JavaScript của Excel có thể tạo và thao tác cấu trúc dữ liệu cũng như trực quan hóa trong Excel . Bảng và biểu đồ là hai trong số các đối tượng được sử dụng phổ biến hơn nhưng API hỗ trợ PivotTable, hình dạng, hình ảnh, v.v.

programming javascript