Mẫu này cho biết cách tạo trang tính Excel với định dạng tùy chỉnh bằng giao diện người dùng Infragistics Ignite cho thư viện jQuery JavaScript Excel
Mẫu này sử dụng các tính năng CTP [Xem trước kỹ thuật cộng đồng]. API và hành vi có thể thay đổi khi các tính năng này được phát hành với sự hỗ trợ đầy đủ
Tạo tệp
Mẫu này được thiết kế cho kích thước màn hình lớn hơn
Trên thiết bị di động, hãy thử xoay màn hình của bạn, xem kích thước đầy đủ hoặc gửi email đến một thiết bị khác
Mẫu này hiển thị tiêu đề tùy chỉnh cho bảng Excel. Bạn có thể sử dụng thư viện Excel trong trình duyệt và trong thời gian chạy JavaScript khác, chẳng hạn như Node. js
Xuất dữ liệu sang Excel rất hữu ích trong danh sách dữ liệu cho gần như mọi ứng dụng web. Tính năng xuất giúp tải xuống danh sách dữ liệu dưới dạng tệp để sử dụng ngoại tuyến. Định dạng Excel là lý tưởng để xuất dữ liệu trong một tệp. Chủ yếu là phương thức phía máy chủ được sử dụng để xuất dữ liệu sang excel bằng PHP. Nhưng nếu bạn muốn một giải pháp phía máy khách xuất dữ liệu bảng sang excel, thì có thể dễ dàng thực hiện bằng JavaScript
Chức năng xuất phía máy khách làm cho ứng dụng web thân thiện với người dùng. Sử dụng JavaScript, có thể dễ dàng xuất dữ liệu bảng HTML mà không cần làm mới trang. Trong hướng dẫn này, chúng tôi sẽ chỉ cho bạn cách xuất dữ liệu bảng HTML sang excel bằng JavaScript. Chức năng xuất JavaScript có thể được sử dụng trong danh sách thành viên, danh sách sản phẩm hoặc các danh sách khác để tải xuống danh sách dữ liệu ở định dạng tệp excel
Mã JavaScript.
Hàm exportTableToExcel[] chuyển đổi dữ liệu bảng HTML thành excel và tải xuống dưới dạng tệp XLS [. xls].
tableID– Bắt buộc. Chỉ định ID bảng HTML để xuất dữ liệu từfilename– Tùy chọn. Chỉ định tên tệp để tải xuống dữ liệu excel
function exportTableToExcel[tableID, filename = '']{
var downloadLink;
var dataType = 'application/vnd.ms-excel';
var tableSelect = document.getElementById[tableID];
var tableHTML = tableSelect.outerHTML.replace[/ /g, '%20'];
// Specify file name
filename = filename?filename+'.xls':'excel_data.xls';
// Create download link element
downloadLink = document.createElement["a"];
document.body.appendChild[downloadLink];
if[navigator.msSaveOrOpenBlob]{
var blob = new Blob[['\ufeff', tableHTML], {
type: dataType
}];
navigator.msSaveOrOpenBlob[ blob, filename];
}else{
// Create a link to the file
downloadLink.href = 'data:' + dataType + ', ' + tableHTML;
// Setting the file name
downloadLink.download = filename;
//triggering the function
downloadLink.click[];
}
}
Dữ liệu bảng HTML.
Bảng HTML chứa một số dữ liệu người dùng với một số trường cơ bản như tên, email, quốc gia.
Name
Email
Country
John Doe
john@gmail.com
USA
Michael Addison
michael@gmail.com
UK
Sam Farmer
sam@gmail.com
France
Nút kích hoạt chức năng exportTableToExcel[] để xuất dữ liệu bảng HTML bằng JavaScript
Export Table Data To Excel File
Nếu bạn muốn xuất dữ liệu với tên tệp tùy chỉnh, hãy chuyển tên tệp bạn muốn vào hàm exportTableToExcel[]
Export Table Data To Excel File
Xuất dữ liệu sang Excel trong PHP
Phần kết luận
Mã ví dụ của chúng tôi giúp bạn thêm chức năng xuất trong bảng HTML mà không cần bất kỳ plugin jQuery bên thứ ba hoặc tập lệnh phía máy chủ nào. Bạn có thể dễ dàng xuất dữ liệu bảng bằng mã JavaScript tối thiểu. Ngoài ra, chức năng của mã ví dụ có thể được nâng cao hoặc tùy chỉnh dễ dàng theo nhu cầu của bạn
Bạn có muốn nhận trợ giúp triển khai hay sửa đổi hoặc nâng cao chức năng của tập lệnh này không?
Đặt định dạng ô ngày trong khi xuất Excel trong lưới có thể sắp xếp lạiProductProgress Kendo UI GridProgress Phiên bản giao diện người dùng KendoĐược tạo vào năm 2017. 3. phiên bản 913Làm cách nào tôi có thể thay đổi định dạng của cột ngày trong khi xuất Excel trong Lưới giao diện người dùng Kendo?
- Đăng ký sự kiện
excelExportcủa Grid - Trong trình xử lý sự kiện
excelExport, nhận tất cả cácName Email Country John Doe john@gmail.com USA Michael Addison michael@gmail.com UK Sam Farmer sam@gmail.com France0 vàName Email Country John Doe john@gmail.com USA Michael Addison michael@gmail.com UK Sam Farmer sam@gmail.com France1 của chúng - Dựa trên loại
Name Email Country John Doe john@gmail.com USA Michael Addison michael@gmail.com UK Sam Farmer sam@gmail.com France2, hãy đẩy chỉ mục của cột trong một mảng - Lặp qua các hàng và thay đổi giá trị cũng như định dạng của các cột mong muốn
$["#grid"].kendoGrid[{
toolbar: ["excel"],
excelExport: function[e] {
var sheet = e.workbook.sheets[0];
var grid = e.sender;
var fields = grid.dataSource.options.fields;
var fieldsModels = grid.dataSource.options.schema.model.fields;
var columns = grid.columns;
var dateCells = [];
for [var i = 0; i < fields.length; i++] {
var currentField = fields[i].field;
var currentModel = fieldsModels[currentField];
if [currentModel.type === "date"] {
for [var j = 0; j < columns.length; j++] {
if [currentField === columns[j].field] {
dateCells.push[j];
break;
};
};
};
};
for [var rowIndex = 1; rowIndex < sheet.rows.length; rowIndex++] {
var row = sheet.rows[rowIndex];
for [var q = 0; q < dateCells.length; q++] {
var cellIndex = dateCells[q];
var value = row.cells[cellIndex].value;
var newValue = new Date[value.getFullYear[], value.getMonth[], value.getDate[]];
row.cells[cellIndex].value = newValue;
row.cells[cellIndex].format = "yyyy-MM-dd";
};
};
},
columns: [{
field: "name"
},
{
field: "date2",
width: 80,
format: "{0: dd-MM-yy}"
},
{
field: "age"
},
{
field: "date1",
width: 80,
format: "{0: yy-MM-dd}"
}
],
reorderable: true,
dataSource: {
data: [{
name: "Jane Doe",
date2: new Date[],
age: 30,
date1: new Date[]
},
{
name: "John Doe",
date2: new Date[],
age: 33,
date1: new Date[]
}
],
schema: {
model: {
fields: {
date1: {
type: "date"
},
name: {
type: "string"
},
date2: {
type: "date"
},
age: {
type: "number"
}
}
}
}
}
}];
- Đặt định dạng ô của lưới trong khi xuất Excel