Hướng dẫn how do i download an excel file using javascript? - làm cách nào để tải xuống tệp excel bằng javascript?

Tôi có một ứng dụng JavaScript và API tạo tệp Excel và trả về mảng byte với các tiêu đề sau:

Content-Type: application/vnd.openxmlformats-officedocument.spreadsheetml.sheet
Content-Disposition:attachment; filename=List.xlsx

Khi tôi truy cập URL API tài nguyên Excel, tôi đã được nhắc tải xuống tệp Excel. Nếu tôi làm như vậy, nó sẽ tải xuống tốt và mở trong Excel. Mọi thứ đều tốt.

Bây giờ đến vấn đề:

Điều tôi không muốn là hiển thị URL API trong cửa sổ Trình duyệt của người dùng, vì vậy mục tiêu của tôi là:

• Tải xuống tệp Excel thông qua Ajax XMLHTTPREQUEST
• Lưu trữ nội dung [mảng byte] trong một đốm màu
• Tạo một URI dữ liệu với Blob
• Mở URI dữ liệu trong cửa sổ bật lên, nhắc nhở người dùng tải xuống tệp Excel

Những gì tôi có là đây:

Nó tải xuống tệp, nhưng khi tôi cố gắng mở tệp, Excel không nhận ra nó là tệp Excel hợp lệ.

// "data" is the contents from the server

var reader = new FileReader[];
var blob = new Blob[[data], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' }];
reader.readAsDataURL[blob];

reader.onloadend = function [e] {
    window.open[reader.result, 'Excel', 'width=20,height=10,toolbar=0,menubar=0,scrollbars=no', '_blank'];
}

Trong bài viết này, tôi sẽ giải thích với một ví dụ, cách tải xuống tệp Excel [XLS và XLSX] bằng JavaScript.

Dữ liệu bảng HTML sẽ được chuyển đổi và tải xuống thành tệp Excel với sự trợ giúp của plugin JQuery Table2Excel.

Đánh dấu HTML

Đánh dấu HTML sau đây bao gồm một bảng HTML và một nút.

& nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; Suzanne Mathewshtml xmlns="//www.w3.org/1999/xhtml">

& nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; Suzanne Mathewshead>

& nbsp; & nbsp; & nbsp;

& nbsp; & nbsp; & nbsp; & nbsp;

& nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; thân hìnhbody

& nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; {

& nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; Phông chữ-gia đình: Arial;font-family: Arial;

& nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; kích thước phông chữ: 10pt;font-size: 10pt;

& nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; }

& nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; bàntable

& nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; {

& nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; Phông chữ-gia đình: Arial;border: 1px solid #ccc;

& nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; kích thước phông chữ: 10pt;border-collapse: collapse;

& nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; }

& nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; bàntable th

& nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; {

& nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; Phông chữ-gia đình: Arial;background-color: #F7F7F7;

& nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; kích thước phông chữ: 10pt;color: #333;

& nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; }font-weight: bold;

& nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; }

& nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; bàntable th, table td

& nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; {

& nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; Phông chữ-gia đình: Arial;padding: 5px;

& nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; Phông chữ-gia đình: Arial;border: 1px solid #ccc;

& nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; }

& nbsp; & nbsp; & nbsp;

& nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; {head>

& nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; {body>

& nbsp; & nbsp; & nbsp; & nbsp;

& nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; thân hình

& nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; {Customer Id

& nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; Phông chữ-gia đình: Arial;Name

& nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; kích thước phông chữ: 10pt;Country

& nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; thân hình

& nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; thân hình

& nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; {1

& nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; Phông chữ-gia đình: Arial;John Hammond

& nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; kích thước phông chữ: 10pt;United States

& nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; thân hình

& nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; thân hình

& nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; {2

& nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; Phông chữ-gia đình: Arial;Mudassar Khan

& nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; kích thước phông chữ: 10pt;India

& nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; thân hình

& nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; thân hình

& nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; {3

& nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; Phông chữ-gia đình: Arial;Suzanne Mathews

& nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; kích thước phông chữ: 10pt;France

& nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; thân hình

& nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; thân hình

& nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; {4

& nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; Phông chữ-gia đình: Arial;Robert Schidner

& nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; kích thước phông chữ: 10pt;Russia

& nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; thân hình

& nbsp; & nbsp; & nbsp;

& nbsp; & nbsp; & nbsp;

& nbsp; & nbsp; & nbsp;

& nbsp; & nbsp; & nbsp;

& nbsp; & nbsp; & nbsp;

& nbsp; & nbsp; & nbsp;

& nbsp; & nbsp; & nbsp; & nbsp;function Export[] {

& nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; thân hình"#tblCustomers"].table2excel[{

& nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; {"Table.xls"

& nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; Phông chữ-gia đình: Arial;

& nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; }

& nbsp; & nbsp; & nbsp;

& nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; {body>

& nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; {html>

Explanation:

& nbsp; & nbsp; & nbsp; & nbsp;

& nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; thân hình

& nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; {: You will get a Warning message from Microsoft Excel application when you try to open the generated Excel file. This Warning is shown because the generated file is not a valid Excel format as the plugin simply exports the HTML content to an Excel file.

Ảnh chụp màn hình

Bảng HTML

Tệp Excel đang được tải xuống khi nhấp vào nút Xuất

Tệp Excel được tạo

tính tương thích của trình duyệt web

Mã trên đã được kiểm tra trong các trình duyệt sau.

* Tất cả các logo trình duyệt được hiển thị ở trên là thuộc tính của chủ sở hữu tương ứng của họ.

Thử nghiệm

Tải xuống

Tải xuống API Word/PDF/Excel miễn phí

Bình luận

Không có ý kiến ​​đã được thêm vào bài viết này.

Làm cách nào để tải xuống bảng tính Excel trong JavaScript?

Làm cách nào để tải xuống một tệp XLSX trong JavaScript?

JavaScript có thể kết nối với Excel không?

Làm cách nào để tải xuống một tệp xlsx?