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
Đặ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 913
Là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 excelExport của Grid
Trong trình xử lý sự kiện excelExport, nhận tất cả các fields và models của chúng
Dựa trên loại model, 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
<div id="grid"></div>
<script>
$("#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"
}
}
}
}
}
});
</script>
Đặt định dạng ô của lưới trong khi xuất Excel
Kể từ Kendo UI Q3 2014 (2014. 3. 1119), tiện ích Lưới cung cấp chức năng xuất Excel tích hợp
Đối với các ví dụ có thể chạy được, hãy tham khảo
Demo xuất Grid sang Excel
Demo copy dữ liệu sang excel
Để bật tùy chọn xuất Excel của Grid
Bao gồm lệnh thanh công cụ tương ứng và đặt cài đặt xuất
cấu hình thanh công cụ
Cấu hình xuất Excel
Bao gồm tập lệnh JSZip trên trang. Để biết thêm thông tin, hãy tham khảo bài viết với
Để bắt đầu xuất Excel thông qua mã, hãy gọi phương thức saveAsExcel
Theo mặc định, Lưới xuất trang dữ liệu hiện tại có áp dụng sắp xếp, lọc, nhóm và tổng hợp
Lưới sử dụng thứ tự, khả năng hiển thị và kích thước cột hiện tại để tạo tệp Excel
Lưới không xuất chủ đề CSS hiện tại trong tệp Excel. Để biết thêm thông tin về cách thay đổi giao diện trực quan của tài liệu Excel, hãy tham khảo phần bên dưới về
Lưới chỉ xuất các cột có giới hạn dữ liệu. Tất cả các cột không có bộ tùy chọn trường sẽ bị bỏ qua
Tùy chọn format không được sử dụng trong quá trình xuất. Để biết thêm thông tin, tham khảo phần trên
Tùy chọn template không được sử dụng trong quá trình xuất. Để biết thêm thông tin, tham khảo phần trên
Tùy chọn detailTemplate không được sử dụng trong quá trình xuất. Để biết thêm thông tin, tham khảo phần trên
Để biết thêm thông tin, hãy tham khảo bản trình diễn trực tuyến về xuất Excel
Ví dụ sau minh họa cách bật chức năng xuất Excel của Grid
5 cho phép bạn đảo ngược các ô và đặt căn chỉnh văn bản để hỗ trợ các ngôn ngữ viết từ phải sang trái (RTL). Để hiển thị tài liệu theo luồng từ phải sang trái trong Excel, hãy bật tùy chọn
Theo mặc định, mỗi Lưới xuất nội dung của nó trong một trang tính Excel riêng biệt. Để biết thêm thông tin, hãy tham khảo ví dụ về cách xuất nhiều Lưới trong một tài liệu Excel
Để gửi tệp đã tạo đến một dịch vụ từ xa, hãy ngăn lưu tệp mặc định và đăng nội dung được mã hóa
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/2.4.0/jszip.min.js"></script>
<div id="grid"></div>
<script>
$("#grid").kendoGrid({
toolbar: ["excel"],
dataSource: {
type: "odata",
transport: {
read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Products"
},
pageSize: 7
},
pageable: true,
columns: [
{ width: 300, field: "ProductName", title: "Product Name" },
{ field: "UnitsOnOrder", title: "Units On Order" },
{ field: "UnitsInStock", title: "Units In Stock" }
],
excelExport: function(e) {
// Prevent the default behavior which will prompt the user to save the generated file.
e.preventDefault();
// Get the Excel file as a data URL.
var dataURL = new kendo.ooxml.Workbook(e.workbook).toDataURL();
// Strip the data URL prologue.
var base64 = dataURL.split(";base64,")[1];
// Post the base64 encoded content to the server which can save it.
$.post("/server/save", {
base64: base64,
fileName: "ExcelExport.xlsx"
});
}
});
</script>
Để xuất các bộ dữ liệu khổng lồ sang Excel, hãy sử dụng thư viện RadSpreadStreamProcessing là một phần của Xử lý tài liệu Telerik (TDP) của Progress
Để biết các ví dụ về xuất tệp Excel, hãy tham khảo thư viện RadSpreadProcessing
Để biết thêm thông tin về quá trình xử lý phía máy chủ Grid, hãy tham khảo
Trong một số trường hợp, bạn có thể muốn ẩn cột đã cho hoặc nhiều cột khỏi xuất. Điều này có thể đạt được bằng cách sử dụng cài đặt Có thể xuất
Nó cũng có thể được đặt thành một Đối tượng chứa các giá trị khác nhau cho các chế độ xuất Excel và PDF, cung cấp các tùy chọn riêng cho từng chế độ
Lưới và Nguồn dữ liệu của nó chỉ chứa các mục dữ liệu từ trang hiện tại trong quá trình xuất phía máy khách. Do đó, hãy thực hiện xuất theo khối hoặc tắt tính năng phân trang
Kích thước tối đa của tệp đã xuất có giới hạn dành riêng cho hệ thống. Đối với các tập dữ liệu lớn, hãy sử dụng giải pháp phía máy chủ do RadSpreadStreamProcessing cung cấp như một phần của Thư viện xử lý tài liệu
Xuất Lưới sang Excel trong các trình duyệt cũ hơn, chẳng hạn như Internet Explorer 9 và Safari, yêu cầu triển khai proxy máy chủ. Để biết thêm thông tin, hãy tham khảo phần cấu hình
Nếu bạn sử dụng Kendo UI Q2 2014 SP2 (2014. 2. 1008) trở về trước, quá trình xuất yêu cầu triển khai tùy chỉnh. Để đạt được nhiệm vụ đó, hoặc
Sử dụng triển khai phía máy chủ để xuất trực tiếp dữ liệu được hiển thị bởi Lưới hoặc
Sử dụng triển khai phía máy khách để xuất đánh dấu HTML của bảng hoặc các mục nguồn dữ liệu của Lưới
Lưới không sử dụng các mẫu cột trong quá trình xuất Excel—nó chỉ xuất dữ liệu. Lý do cho hành vi này là mẫu cột có thể chứa HTML tùy ý không thể chuyển đổi thành giá trị cột Excel. Để biết thêm thông tin về cách sử dụng mẫu cột không chứa HTML, hãy tham khảo ví dụ về mẫu cột này
Lưới không xuất mẫu chi tiết của nó vì lý do tương tự như nó không xuất các mẫu cột của nó. Nếu mẫu chi tiết chứa một Lưới khác, hãy làm theo ví dụ về cách xuất Lưới chi tiết
Lưới không sử dụng các định dạng cột trong quá trình xuất Excel vì một số định dạng Giao diện người dùng Kendo không tương thích với Excel. Để định dạng các giá trị ô, hãy đặt tùy chọn format của các ô
Để biết thêm thông tin về các định dạng được Excel hỗ trợ, hãy tham khảo trang này. Để biết thêm thông tin về cách định dạng giá trị ô, hãy tham khảo ví dụ này
Làm cách nào để xuất bảng HTML sang XLSX bằng jQuery?
Đánh dấu HTML sau bao gồm một Bảng HTML và một Nút. Giải trình. Khi nhấp vào Nút Xuất, plugin jQuery table2excel được áp dụng cho Bảng HTML . Plugin jQuery table2excel chấp nhận tham số tên tệp đặt tên của tệp Excel.
Làm cách nào để xuất div sang Excel bằng jQuery?
Bước 2. Sau đây là code xuất dữ liệu ra excel (jQuery). .
