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

Question

JavaScript là một nền tảng đa năng cho phép dễ dàng tùy chỉnh các công cụ kịch bản phía máy khách. Trong một số ứng dụng, thật hữu ích khi có một số loại giao diện bảng tính dễ dàng mã hóa và bảo trì. Thành phần bảng tính JavaScript phía máy khách của SprepJS là hoàn hảo cho việc này.

Nội dung chính Show

Thiết lập dự án bảng tính JavaScript
Thêm mã nhập excel
Thêm dữ liệu vào tệp Excel đã nhập
Thêm một tia lửa
Thêm mã xuất excel
Làm cách nào để tải xuống một tệp xlsx?
Bạn có thể sử dụng Excel với JavaScript không?
Làm cách nào để tải xuống tệp Excel với Node JS?
Làm thế nào để bạn xuất tải xuống bảng HTML sang Excel bằng JavaScript?

Thêm bảng tính JavaScript hoàn chỉnh vào các ứng dụng web doanh nghiệp của bạn. Tải xuống Splorjs ngay bây giờ!

Trong blog này, chúng tôi sẽ đề cập đến cách nhập/xuất sang Excel trong JavaScript theo các bước sau:

Thiết lập dự án bảng tính JavaScript
Thêm mã nhập excel
Thêm dữ liệu vào tệp Excel đã nhập
Thêm một tia lửa
Thêm mã xuất excel

Thiết lập dự án bảng tính JavaScript

Thêm mã nhập excel

Thêm dữ liệu vào tệp Excel đã nhập

Thêm một tia lửa

Thêm mã xuất excel

Để bắt đầu, chúng tôi có thể sử dụng các tệp splitjs được lưu trữ trên NPM. Để làm điều này, chúng ta có thể cài đặt bằng đối số dòng lệnh. Mở dấu nhắc lệnh và điều hướng đến vị trí ứng dụng của bạn. Ở đó, bạn có thể cài đặt các tệp cần thiết với một lệnh.

<!DOCTYPE html>  
<html>  
<head>  
    <title>SpreadJS ExcelIO</title>
    <script src="./node_modules/jquery/dist/jquery.min.js" type="text/javascript"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2014-11-29/FileSaver.min.js"></script>

    <link href="./node_modules/@grapecity/spread-sheets/styles/gc.spread.sheets.excel2013white.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="./node_modules/@grapecity/spread-sheets/dist/gc.spread.sheets.all.min.js"></script>
    <script type="text/javascript" src="./node_modules/@grapecity/spread-excelio/dist/gc.spread.excelio.min.js"></script>

</head>  
<body>  
    <div id="ss" style="height:600px; width :100%; "></div>  
</body>  
</html>

Trong trường hợp này, chúng tôi cần thư viện trải dài cơ sở, Excelio và JQuery: JQuery:

npm i @grapecity/lan truyền @grapecity/splang-excelio jQuery

    <script type="text/javascript">  
        $(document).ready(function () {  
            var workbook = new GC.Spread.Sheets.Workbook(document.getElementById("ss"));  
        });  
    </script>  
</head>  
<body>  
    <div id="ss" style="height:600px ; width :100%; "></div>  
</body>

Thêm mã nhập excel

Thêm dữ liệu vào tệp Excel đã nhập

var excelIO = new GC.Spread.Excel.IO();

Thêm một tia lửa

<input type="text" id="importUrl" value="http://www.testwebsite.com/files/TestExcel.xlsx" style="width:300px" />

Thêm mã xuất excel

var excelUrl = $("#importUrl").val();

Để bắt đầu, chúng tôi có thể sử dụng các tệp splitjs được lưu trữ trên NPM. Để làm điều này, chúng ta có thể cài đặt bằng đối số dòng lệnh. Mở dấu nhắc lệnh và điều hướng đến vị trí ứng dụng của bạn. Ở đó, bạn có thể cài đặt các tệp cần thiết với một lệnh.

function ImportFile() {  
    var excelUrl = "./test.xlsx";  

    var oReq = new XMLHttpRequest();  
    oReq.open('get', excelUrl, true);  
    oReq.responseType = 'blob';  
    oReq.onload = function () {  
        var blob = oReq.response;  
        excelIO.open(blob, LoadSpread, function (message) {  
            console.log(message);  
        });  
    };  
    oReq.send(null);  
}  
function LoadSpread(json) {  
    jsonData = json;  
    workbook.fromJSON(json);  

    workbook.setActiveSheet("Revenues (Sales)");  
}

Trong trường hợp này, chúng tôi cần thư viện trải dài cơ sở, Excelio và JQuery: JQuery:$(document).ready function:

$(document).ready(function () {  
    $.support.cors = true;  
    workbook = new GC.Spread.Sheets.Workbook(document.getElementById("ss"));  
    //...  
});

npm i @grapecity/lan truyền @grapecity/splang-excelio jQuery$.support.cors = true; line, or else attempting to load it will result in a CORS error.

Thêm dữ liệu vào tệp Excel đã nhập

Thêm một tia lửa

Thêm mã xuất excelSpread.Sheets script to add another revenue line into this file. Let’s add a button to the page that will do just that:

<button id="addRevenue">Add Revenue</button>

Để bắt đầu, chúng tôi có thể sử dụng các tệp splitjs được lưu trữ trên NPM. Để làm điều này, chúng ta có thể cài đặt bằng đối số dòng lệnh. Mở dấu nhắc lệnh và điều hướng đến vị trí ứng dụng của bạn. Ở đó, bạn có thể cài đặt các tệp cần thiết với một lệnh.copyTo function and pass in:

Trong trường hợp này, chúng tôi cần thư viện trải dài cơ sở, Excelio và JQuery: JQuery:
npm i @grapecity/lan truyền @grapecity/splang-excelio jQuery
Splorjs không phụ thuộc vào jQuery, nhưng trong trường hợp này, chúng tôi sử dụng nó cho hỗ trợ yêu cầu có nguồn gốc chéo dễ dàng, mà chúng tôi sẽ xem xét sau.CopyToOptions value for style

document.getElementById("addRevenue").onclick = function () {  
    var sheet = workbook.getActiveSheet();  
    sheet.addRows(newRowIndex, 1);  
    sheet.copyTo(10, 1, newRowIndex, 1, 1, 29, GC.Spread.Sheets.CopyToOptions.style);  
}

Khi chúng được cài đặt, chúng tôi có thể thêm các tham chiếu vào các tệp tập lệnh và CSS đó trong mã của chúng tôi:setValue function. This allows us to set a value in a sheet in Spread by passing in a row index, column index, and value:

sheet.setValue(newRowIndex, 1, "Revenue 8");  

for (var c = 3; c < 15; c++) {  
    sheet.setValue(newRowIndex, c, Math.floor(Math.random() * 200) + 10);  
}

Chúng tôi cũng sẽ cần thư viện FileSaver, mà chúng tôi đã nhập cùng với các tệp splitjs và jQuery.SUM formula in column P to match the other rows and set a percentage for column Q:

    <script type="text/javascript">  
        $(document).ready(function () {  
            var workbook = new GC.Spread.Sheets.Workbook(document.getElementById("ss"));  
        });  
    </script>  
</head>  
<body>  
    <div id="ss" style="height:600px ; width :100%; "></div>  
</body>

0

Sau đó, chúng ta có thể thêm một tập lệnh vào trang để khởi tạo thành phần lan truyền và phần tử div để chứa nó (vì thành phần bảng tính của SprepcopyTo function again, this time using CopyToOptions.formula:

    <script type="text/javascript">  
        $(document).ready(function () {  
            var workbook = new GC.Spread.Sheets.Workbook(document.getElementById("ss"));  
        });  
    </script>  
</head>  
<body>  
    <div id="ss" style="height:600px ; width :100%; "></div>  
</body>

1

Thêm một tia lửa

Thêm mã xuất excel

Để bắt đầu, chúng tôi có thể sử dụng các tệp splitjs được lưu trữ trên NPM. Để làm điều này, chúng ta có thể cài đặt bằng đối số dòng lệnh. Mở dấu nhắc lệnh và điều hướng đến vị trí ứng dụng của bạn. Ở đó, bạn có thể cài đặt các tệp cần thiết với một lệnh.
Trong trường hợp này, chúng tôi cần thư viện trải dài cơ sở, Excelio và JQuery: JQuery:

    <script type="text/javascript">  
        $(document).ready(function () {  
            var workbook = new GC.Spread.Sheets.Workbook(document.getElementById("ss"));  
        });  
    </script>  
</head>  
<body>  
    <div id="ss" style="height:600px ; width :100%; "></div>  
</body>

2

npm i @grapecity/lan truyền @grapecity/splang-excelio jQuerysetSparkline method and specify:

Splorjs không phụ thuộc vào jQuery, nhưng trong trường hợp này, chúng tôi sử dụng nó cho hỗ trợ yêu cầu có nguồn gốc chéo dễ dàng, mà chúng tôi sẽ xem xét sau.
Khi chúng được cài đặt, chúng tôi có thể thêm các tham chiếu vào các tệp tập lệnh và CSS đó trong mã của chúng tôi:
Chúng tôi cũng sẽ cần thư viện FileSaver, mà chúng tôi đã nhập cùng với các tệp splitjs và jQuery.
Sau đó, chúng ta có thể thêm một tập lệnh vào trang để khởi tạo thành phần lan truyền và phần tử div để chứa nó (vì thành phần bảng tính của Sprep
Chúng ta cần tạo một thể hiện của thành phần Excelio phía máy khách mà chúng ta có thể sử dụng để mở tệp:

    <script type="text/javascript">  
        $(document).ready(function () {  
            var workbook = new GC.Spread.Sheets.Workbook(document.getElementById("ss"));  
        });  
    </script>  
</head>  
<body>  
    <div id="ss" style="height:600px ; width :100%; "></div>  
</body>

3

Sau đó, chúng ta cần thêm một chức năng để nhập một tệp. Trong ví dụ này, chúng tôi nhập một tệp cục bộ, nhưng bạn có thể làm điều tương tự với một tệp trên máy chủ. Bạn cần tham khảo vị trí nếu nhập tệp từ máy chủ. Sau đây là một ví dụ về phần tử đầu vào trong đó người dùng có thể nhập vị trí của tệp:

    <script type="text/javascript">  
        $(document).ready(function () {  
            var workbook = new GC.Spread.Sheets.Workbook(document.getElementById("ss"));  
        });  
    </script>  
</head>  
<body>  
    <div id="ss" style="height:600px ; width :100%; "></div>  
</body>

4

Khi chúng tôi thêm mã đó, chúng tôi có thể mở trang trong trình duyệt web và xem tải tệp excel vào chênh lệch. Hàng với một hàng doanh thu bổ sung. Quan trọng: Hãy nhớ rằng Chrome không cho phép bạn mở các tệp cục bộ cho mục đích bảo mật, vì vậy bạn cần sử dụng trình duyệt web như Firefox để chạy thành công mã này. Ngoài ra, tải một tệp từ URL trang web sẽ mở tốt trong bất kỳ trình duyệt nào.Important: Keep in mind that Chrome doesn’t allow you to open local files for security purposes, so you need to use a web browser like Firefox to run this code successfully. Alternatively, loading a file from a website URL should open fine in any browser.

Thêm mã xuất excel

Cuối cùng, chúng ta có thể thêm một nút để xuất tệp với hàng được thêm vào. Để làm điều này, chúng ta có thể sử dụng mã Excelio phía máy khách được tích hợp vào chênh lệch.

    <script type="text/javascript">  
        $(document).ready(function () {  
            var workbook = new GC.Spread.Sheets.Workbook(document.getElementById("ss"));  
        });  
    </script>  
</head>  
<body>  
    <div id="ss" style="height:600px ; width :100%; "></div>  
</body>

5

Mã đó có được tên tệp xuất từ phần tử đầu vào ExportFileName. Chúng ta có thể xác định nó và cho phép người dùng đặt tên cho tệp như vậy:exportFileName input element. We can define it and let users name the file like so:

    <script type="text/javascript">  
        $(document).ready(function () {  
            var workbook = new GC.Spread.Sheets.Workbook(document.getElementById("ss"));  
        });  
    </script>  
</head>  
<body>  
    <div id="ss" style="height:600px ; width :100%; "></div>  
</body>

6

Sau đó, chúng ta có thể thêm một nút gọi chức năng này:

    <script type="text/javascript">  
        $(document).ready(function () {  
            var workbook = new GC.Spread.Sheets.Workbook(document.getElementById("ss"));  
        });  
    </script>  
</head>  
<body>  
    <div id="ss" style="height:600px ; width :100%; "></div>  
</body>

7

    <script type="text/javascript">  
        $(document).ready(function () {  
            var workbook = new GC.Spread.Sheets.Workbook(document.getElementById("ss"));  
        });  
    </script>  
</head>  
<body>  
    <div id="ss" style="height:600px ; width :100%; "></div>  
</body>

8

Khi bạn thêm một hàng doanh thu, bạn có thể xuất tệp bằng nút Xuất. Đảm bảo thêm thư viện bên ngoài FileSaver để cho phép người dùng lưu tệp nơi họ muốn:Export File button. Make sure to add the FileSaver external library to allow users to save the file where they want:

    <script type="text/javascript">  
        $(document).ready(function () {  
            var workbook = new GC.Spread.Sheets.Workbook(document.getElementById("ss"));  
        });  
    </script>  
</head>  
<body>  
    <div id="ss" style="height:600px ; width :100%; "></div>  
</body>

9

Khi tệp được xuất thành công, bạn có thể mở nó trong Excel và thấy rằng tệp trông giống như khi nó được nhập, ngoại trừ hiện có một dòng doanh thu bổ sung mà chúng tôi đã thêm.

Đây chỉ là một ví dụ về cách bạn có thể sử dụng bảng tính JavaScript để thêm dữ liệu vào các tệp Excel của bạn và sau đó xuất chúng trở lại Excel với mã JavaScript đơn giản.

Tải xuống mẫu ở đây..

Trong một loạt bài viết khác, chúng tôi trình bày cách nhập/xuất bảng tính Excel trong các khung JavaScript khác:

Phản ứng
Vue
Góc

Thêm bảng tính JavaScript hoàn chỉnh vào các ứng dụng web doanh nghiệp của bạn. Tải xuống Splorjs ngay bây giờ!

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

Để thực hiện điều này: Chọn Tệp> Lưu dưới dạng> Tải xuống một bản sao. Nếu Excel yêu cầu mở hay lưu sổ làm việc, hãy chọn Lưu. Lưu ý: Nếu bạn chọn Mở thay vì lưu, sổ làm việc sẽ mở trong chế độ xem được bảo vệ.Select File > Save As > Download a Copy. If Excel asks whether to open or save the workbook, select Save. Note: If you select Open instead of Save, the workbook will open in Protected View.

Bạn có thể sử dụng Excel với JavaScript không?

Một bổ trợ Excel tương tác với các đối tượng trong Excel bằng cách sử dụng API JavaScript Office, bao gồm hai mô hình đối tượng JavaScript: API JavaScript Excel: Được giới thiệu với Office 2016, API JavaScript Excel cung cấp các đối tượng được gõ mạnh mà bạn có thể sử dụng để truy cập bảng tính, Phạm vi, bảng, biểu đồ, và nhiều hơn nữa., which includes two JavaScript object models: Excel JavaScript API: Introduced with Office 2016, the Excel JavaScript API provides strongly-typed objects that you can use to access worksheets, ranges, tables, charts, and more.