HTML có thể xem các trang web trong bất kỳ trình duyệt nào có trên thiết bị cầm tay. Hiển thị dữ liệu Excel trên các trang HTML giúp hiển thị dữ liệu cho các bên liên quan mà không cần chia sẻ bảng tính Excel thực tế với họ. Vì vậy, họ có thể xem thông tin/dữ liệu cần thiết trong bất kỳ trình duyệt nào một cách dễ dàng. Trong bài viết này, chúng ta sẽ tìm hiểu cách hiển thị dữ liệu Excel trong HTML bằng API REST trong Node.js.
Các chủ đề sau đây sẽ được đề cập trong bài viết này:
- Excel sang HTML Viewer REST API và Node.js SDK
- Hiển thị Dữ liệu Excel trong HTML bằng API REST trong Node.js
- Hiển thị dữ liệu Excel trong HTML với Watermark trong Node.js
Excel sang HTML Viewer REST API và Node.js SDK
Để hiển thị bảng tính XLS hoặc XLSX, tôi sẽ sử dụng API Node.js SDK của GroupDocs.Viewer Cloud. Nó cho phép hiển thị và xem tất cả các loại tài liệu phổ biến và định dạng tệp hình ảnh theo chương trình. Vui lòng cài đặt nó bằng lệnh sau trong bảng điều khiển:
npm install groupdocs-conversion-cloud
Vui lòng lấy Client ID và Secret của bạn từ bảng điều khiển trước khi làm theo các bước được đề cập. Khi bạn có ID và bí mật của mình, hãy thêm mã như hình bên dưới:
// Vui lòng lấy Client ID và Secret của bạn từ bảng điều khiển và thêm mã như hình bên dưới:
global.clientId = "112f0f38-9dae-42d5-b4fc-cc84ae644972";
global.clientSecret = "16ad3fe0bdc39c910f57d2fd48a5d618";
global.myStorage = "";
const configuration = new groupdocs_viewer_cloud.Configuration(clientId, clientSecret);
configuration.apiBaseUrl = "https://api.groupdocs.cloud";
Hiển thị Dữ liệu Excel trong HTML bằng API REST trong Node.js
Chúng tôi có thể hiển thị dữ liệu Excel trong HTML bằng cách thực hiện theo các bước đơn giản dưới đây:
- Tải lên tệp XLSX lên Đám mây
- Hiển thị dữ liệu Excel trong HTML bằng Node.js
- Tải xuống tệp kết xuất
Tải lên tài liệu
Đầu tiên, chúng tôi sẽ tải tệp XLSX lên Đám mây bằng ví dụ mã được cung cấp bên dưới:
// Ví dụ mã này minh họa cách tải tệp XLSX lên Đám mây
// Xây dựng tệpApi
let fileApi = groupdocs_viewer_cloud.FileApi.fromConfig(configuration);
let resourcesFolder = 'C:\\Files\\viewer\\sample.xlsx';
// Đọc từng tệp một
fs.readFile(resourcesFolder, (err, fileStream) => {
// Tạo yêu cầu tệp tải lên
let request = new groupdocs_viewer_cloud.UploadFileRequest("sample.xlsx", fileStream, myStorage);
// Cập nhật dử liệu
fileApi.uploadFile(request);
});
Do đó, tệp đã tải lên sẽ có sẵn trong phần tệp của trang tổng quan trên đám mây.
Hiển thị dữ liệu Excel trong HTML bằng Node.js
Chúng tôi có thể kết xuất hoặc hiển thị dữ liệu Excel trên các trang HTML theo chương trình bằng cách thực hiện theo các bước dưới đây:
- Đầu tiên, tạo một phiên bản của ViewApi.
- Tiếp theo, tạo một phiên bản của FileInfo.
- Sau đó, đặt đường dẫn tệp đầu vào.
- Tiếp theo, tạo một thể hiện của ViewOptions.
- Sau đó, chỉ định FileInfo và đặt “HTML” làm dạng xemĐịnh dạng.
- Tiếp theo, tạo một phiên bản của HtmlOptions.
- Sau đó, bắt đầu và chỉ định SpreadsheetOptions.
- Tiếp theo, đặt các tùy chọn khác nhau như paginateSheets, textOverflowMode, renderGridLines, v.v.
- Sau đó, tạo một yêu cầu xem bằng cách gọi phương thức CreateViewRequest với viewOptions làm đối số.
- Cuối cùng, gọi phương thức ViewApi.createView với CreateViewRequest làm đối số để hiển thị HTML.
Mẫu mã sau đây cho biết cách hiển thị dữ liệu Excel trong HTML bằng API REST trong Node.js.
// Ví dụ mã này minh họa cách hiển thị Excel trong trang HTML
// khởi tạo api
let viewApi = groupdocs_viewer_cloud.ViewApi.fromKeys(clientId, clientSecret);
// tập tin đầu vào
let fileInfo = new groupdocs_viewer_cloud.FileInfo();
fileInfo.filePath = "sample.xlsx";
// Xác định các tùy chọn xem
let viewOptions = new groupdocs_viewer_cloud.ViewOptions();
viewOptions.fileInfo = fileInfo;
viewOptions.viewFormat = groupdocs_viewer_cloud.ViewOptions.ViewFormatEnum.HTML;
// Xác định tùy chọn kết xuất
viewOptions.renderOptions = new groupdocs_viewer_cloud.HtmlOptions();
// Xác định các tùy chọn hiển thị Bảng tính
viewOptions.renderOptions.spreadsheetOptions = new groupdocs_viewer_cloud.SpreadsheetOptions();
viewOptions.renderOptions.spreadsheetOptions.paginateSheets = false;
viewOptions.renderOptions.spreadsheetOptions.textOverflowMode = groupdocs_viewer_cloud.SpreadsheetOptions.TextOverflowModeEnum.HideText;
viewOptions.renderOptions.spreadsheetOptions.renderGridLines = true;
viewOptions.renderOptions.spreadsheetOptions.renderHiddenColumns = true;
viewOptions.renderOptions.spreadsheetOptions.renderHiddenRows = true;
// Tạo yêu cầu xem
let request = new groupdocs_viewer_cloud.CreateViewRequest(viewOptions);
// Tạo chế độ xem
let response = await viewApi.createView(request);
// Hiển thị đường dẫn trang HTML được hiển thị
for (let page = 0; page < response.pages.length; page++) {
console.log("Document rendered: " + response.pages[page].path);
}
Hiển thị dữ liệu Excel trong HTML bằng Node.js
Theo mặc định, một trang tính được kết xuất thành một trang. Chúng tôi có thể tùy chỉnh kết xuất của Excel bằng cách áp dụng các tùy chọn sau:
- Hiển thị một bảng tính Excel thành nhiều trang
viewOptions.renderOptions.spreadsheetOptions.paginateSheets = true;
viewOptions.renderOptions.spreadsheetOptions.countRowsPerPage = 45;
- Hiển thị Gridlines trong HTML
viewOptions.renderOptions.spreadsheetOptions.renderGridLines = true;
- Kết xuất hàng và cột trống
viewOptions.renderOptions.spreadsheetOptions.renderEmptyRows = true;
viewOptions.renderOptions.spreadsheetOptions.renderEmptyColumns = true;
- Hiển thị hàng và cột ẩn
viewOptions.renderOptions.spreadsheetOptions.renderHiddenColumns = true;
viewOptions.renderOptions.spreadsheetOptions.renderHiddenRows = true;
- Chỉ kết xuất khu vực in
viewOptions.renderOptions.spreadsheetOptions.renderPrintAreaOnly = true;
- Đặt chế độ tràn văn bản
viewOptions.renderOptions.spreadsheetOptions.textOverflowMode = "HideText";
Tải xuống các trang HTML
Mẫu mã trên sẽ lưu (các) trang HTML được hiển thị trên đám mây. Nó có thể được tải xuống bằng ví dụ mã sau:
// Ví dụ mã này minh họa cách tải xuống trang HTML từ Đám mây
// Khởi tạo api
var fileApi = groupdocs_viewer_cloud.FileApi.fromConfig(configuration);
// Tạo yêu cầu tải tập tin
let request = new groupdocs_viewer_cloud.DownloadFileRequest("/viewer/sample_xlsx/sample_page_1.html", myStorage);
// Tải tập tin
let response = await fileApi.downloadFile(request);
// Lưu tệp hình ảnh trong thư mục làm việc
fs.writeFile("C:\\Files\\viewer\\sample_xlsx\\sample_page_1.html", response, "binary", function (err) { });
Hiển thị dữ liệu Excel trong HTML với Watermark bằng Node.js
Chúng tôi có thể thêm văn bản hình mờ trong khi hiển thị dữ liệu Excel sang các trang HTML theo chương trình bằng cách thực hiện theo các bước dưới đây:
- Đầu tiên, tạo một phiên bản của ViewApi.
- Tiếp theo, tạo một phiên bản của FileInfo.
- Sau đó, đặt đường dẫn tệp đầu vào.
- Tiếp theo, tạo một thể hiện của ViewOptions.
- Sau đó, chỉ định FileInfo và đặt “HTML” làm dạng xemĐịnh dạng.
- Tiếp theo, tạo và gán một phiên bản của Hình mờ.
- Sau đó, đặt kích thước hình mờ và văn bản.
- Sau đó, tạo một yêu cầu xem bằng cách gọi phương thức CreateViewRequest với viewOptions làm đối số.
- Cuối cùng, gọi phương thức ViewApi.createView với CreateViewRequest làm đối số để hiển thị HTML.
Mẫu mã sau đây cho biết cách hiển thị dữ liệu Excel trong HTML có hình mờ bằng cách sử dụng API REST trong Node.js.
// Ví dụ mã này minh họa cách hiển thị Excel trong trang HTML bằng Hình mờ
// khởi tạo api
let viewApi = groupdocs_viewer_cloud.ViewApi.fromKeys(clientId, clientSecret);
// tập tin đầu vào
let fileInfo = new groupdocs_viewer_cloud.FileInfo();
fileInfo.filePath = "sample.xlsx";
// Xác định các tùy chọn xem
let viewOptions = new groupdocs_viewer_cloud.ViewOptions();
viewOptions.fileInfo = fileInfo;
viewOptions.viewFormat = groupdocs_viewer_cloud.ViewOptions.ViewFormatEnum.HTML;
// Thêm hình mờ
viewOptions.watermark = new groupdocs_viewer_cloud.Watermark();
viewOptions.watermark.size = 100;
viewOptions.watermark.text = "This is a sample watermark!";
// Tạo yêu cầu xem
let request = new groupdocs_viewer_cloud.CreateViewRequest(viewOptions);
// Tạo chế độ xem
let response = await viewApi.createView(request);
// Hiển thị đường dẫn trang HTML được hiển thị
for (let page = 0; page < response.pages.length; page++) {
console.log("Document rendered: " + response.pages[page].path);
}
Hiển thị dữ liệu Excel trong HTML với Watermark bằng Node.js
Thử trực tuyến
Vui lòng dùng thử công cụ kết xuất Excel trực tuyến miễn phí sau đây, được phát triển bằng cách sử dụng API ở trên. https://products.groupdocs.app/viewer/xlsx
Phần kết luận
Trong bài viết này, chúng ta đã học cách hiển thị dữ liệu Excel dưới dạng HTML trên đám mây. Chúng ta cũng đã biết cách thêm hình mờ vào các trang HTML được hiển thị bằng Node.js. Bài viết này cũng giải thích cách tải tệp XLSX lên đám mây theo chương trình rồi tải xuống tệp HTML được kết xuất từ Đám mây. Ngoài ra, bạn có thể tìm hiểu thêm về GroupDocs.Viewer Cloud API bằng cách sử dụng tài liệu. Chúng tôi cũng cung cấp phần Tham khảo API cho phép bạn hình dung và tương tác trực tiếp với các API của chúng tôi thông qua trình duyệt. Trong trường hợp có bất kỳ sự mơ hồ nào, vui lòng liên hệ với chúng tôi trên diễn đàn.