แสดงข้อมูล Excel ใน HTML โดยใช้ REST API ใน Node.js

HTML สามารถดูหน้าเว็บได้ในเบราว์เซอร์ใดก็ได้ที่มีในอุปกรณ์พกพา การแสดงข้อมูล Excel บนหน้า HTML จะช่วยแสดงข้อมูลให้กับผู้มีส่วนได้ส่วนเสียที่เกี่ยวข้องโดยไม่ต้องแชร์ สเปรดชีต Excel จริงกับพวกเขา ดังนั้น พวกเขาสามารถดูข้อมูล/ข้อมูลที่จำเป็นในเบราว์เซอร์ใดก็ได้อย่างง่ายดาย ในบทความนี้ เราจะเรียนรู้วิธีการแสดงข้อมูล Excel ใน HTML โดยใช้ REST API ใน Node.js

หัวข้อต่อไปนี้จะครอบคลุมในบทความนี้:

Excel เป็น HTML Viewer REST API และ Node.js SDK

สำหรับการแสดงสเปรดชีต XLS หรือ XLSX ฉันจะใช้ Node.js SDK ของ GroupDocs.Viewer Cloud API ช่วยให้สามารถแสดงผลและดูเอกสารยอดนิยมและรูปแบบไฟล์ภาพทุกประเภทโดยทางโปรแกรม โปรดติดตั้งโดยใช้คำสั่งต่อไปนี้ในคอนโซล:

npm install groupdocs-conversion-cloud

โปรด รับรหัสลูกค้าและข้อมูลลับจากแดชบอร์ด ก่อนทำตามขั้นตอนดังกล่าว เมื่อคุณมี ID และรหัสลับของคุณแล้ว ให้เพิ่มรหัสตามที่แสดงด้านล่าง:

// โปรดรับรหัสไคลเอนต์และรหัสลับของคุณจากแดชบอร์ดและเพิ่มรหัสตามที่แสดงด้านล่าง:
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";

แสดงข้อมูล Excel ใน HTML โดยใช้ REST API ใน Node.js

เราสามารถแสดงข้อมูล Excel ในรูปแบบ HTML โดยทำตามขั้นตอนง่าย ๆ ด้านล่าง:

  1. อัปโหลด ไฟล์ XLSX ไปยังคลาวด์
  2. แสดงข้อมูล Excel ใน HTML โดยใช้ Node.js
  3. ดาวน์โหลด ไฟล์เรนเดอร์

อัปโหลดเอกสาร

ประการแรก เราจะอัปโหลดไฟล์ XLSX ไปยังคลาวด์โดยใช้ตัวอย่างโค้ดที่ระบุด้านล่าง:

// ตัวอย่างรหัสนี้สาธิตวิธีการอัปโหลดไฟล์ XLSX ไปยังคลาวด์
// สร้าง FileApi
let fileApi = groupdocs_viewer_cloud.FileApi.fromConfig(configuration);
let resourcesFolder = 'C:\\Files\\viewer\\sample.xlsx';

// อ่านไฟล์ทีละไฟล์
fs.readFile(resourcesFolder, (err, fileStream) => {
  // สร้างคำขออัปโหลดไฟล์
  let request = new groupdocs_viewer_cloud.UploadFileRequest("sample.xlsx", fileStream, myStorage);
  // อัพโหลดไฟล์
  fileApi.uploadFile(request);
});

ด้วยเหตุนี้ ไฟล์ที่อัปโหลดจะอยู่ใน ส่วนไฟล์ ของแดชบอร์ดบนระบบคลาวด์

แสดงข้อมูล Excel ใน HTML โดยใช้ Node.js

เราสามารถแสดงหรือแสดงข้อมูล Excel บนหน้า HTML โดยทางโปรแกรมโดยทำตามขั้นตอนด้านล่าง:

  • ประการแรก สร้างอินสแตนซ์ของ ViewApi
  • จากนั้น สร้างอินสแตนซ์ของ FileInfo
  • จากนั้นตั้งค่าเส้นทางไฟล์อินพุต
  • จากนั้น สร้างอินสแตนซ์ของ ViewOptions
  • จากนั้น กำหนด FileInfo และตั้งค่า “HTML” เป็น viewFormat
  • จากนั้น สร้างอินสแตนซ์ของ HtmlOptions
  • จากนั้น เริ่มต้นและกำหนดตัวเลือกสเปรดชีต
  • จากนั้นตั้งค่าตัวเลือกต่างๆ เช่น paginateSheets, textOverflowMode, renderGridLines เป็นต้น
  • หลังจากนั้น สร้างคำขอดูโดยเรียกเมธอด CreateViewRequest โดยมี viewOptions เป็นอาร์กิวเมนต์
  • สุดท้าย เรียกเมธอด ViewApi.createView ด้วย CreateViewRequest เป็นอาร์กิวเมนต์เพื่อแสดง HTML

ตัวอย่างโค้ดต่อไปนี้แสดงวิธีการแสดงข้อมูล Excel ใน HTML โดยใช้ REST API ใน Node.js

// ตัวอย่างรหัสนี้สาธิตวิธีการแสดง Excel ในหน้า HTML
// การเริ่มต้น API
let viewApi = groupdocs_viewer_cloud.ViewApi.fromKeys(clientId, clientSecret);

// ไฟล์อินพุต
let fileInfo = new groupdocs_viewer_cloud.FileInfo();
fileInfo.filePath = "sample.xlsx";

// กำหนดตัวเลือกมุมมอง
let viewOptions = new groupdocs_viewer_cloud.ViewOptions();
viewOptions.fileInfo = fileInfo;
viewOptions.viewFormat = groupdocs_viewer_cloud.ViewOptions.ViewFormatEnum.HTML;

// กำหนดตัวเลือกการเรนเดอร์
viewOptions.renderOptions = new groupdocs_viewer_cloud.HtmlOptions();

// กำหนดตัวเลือกการแสดงผลสเปรดชีต
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;

// สร้างคำขอดู
let request = new groupdocs_viewer_cloud.CreateViewRequest(viewOptions);
// สร้างมุมมอง
let response = await viewApi.createView(request);

// แสดงเส้นทางหน้า HTML ที่แสดงผล
for (let page = 0; page < response.pages.length; page++) {
  console.log("Document rendered: " + response.pages[page].path);
}
แสดงข้อมูล Excel ใน HTML โดยใช้ Node.js

แสดงข้อมูล Excel ใน HTML โดยใช้ Node.js

ตามค่าเริ่มต้น แผ่นงานหนึ่งแผ่นจะแสดงเป็นหน้าเดียว เราสามารถปรับแต่งการแสดงผลของ Excel ได้โดยใช้ตัวเลือกต่อไปนี้:

  • แสดงแผ่นงาน Excel เป็นหลายหน้า
viewOptions.renderOptions.spreadsheetOptions.paginateSheets = true;
viewOptions.renderOptions.spreadsheetOptions.countRowsPerPage = 45;
  • แสดงเส้นตารางใน HTML
viewOptions.renderOptions.spreadsheetOptions.renderGridLines = true;
  • แสดงแถวและคอลัมน์ว่าง
viewOptions.renderOptions.spreadsheetOptions.renderEmptyRows = true;
viewOptions.renderOptions.spreadsheetOptions.renderEmptyColumns = true;
  • แสดงแถวและคอลัมน์ที่ซ่อนอยู่
viewOptions.renderOptions.spreadsheetOptions.renderHiddenColumns = true;
viewOptions.renderOptions.spreadsheetOptions.renderHiddenRows = true;
  • แสดงพื้นที่พิมพ์เท่านั้น
viewOptions.renderOptions.spreadsheetOptions.renderPrintAreaOnly = true;
  • ตั้งค่าโหมดข้อความล้น
viewOptions.renderOptions.spreadsheetOptions.textOverflowMode = "HideText";

ดาวน์โหลดหน้า HTML

ตัวอย่างโค้ดด้านบนจะบันทึกหน้า HTML ที่แสดงผลบนคลาวด์ สามารถดาวน์โหลดได้โดยใช้ตัวอย่างโค้ดต่อไปนี้:

// ตัวอย่างรหัสนี้สาธิตวิธีการดาวน์โหลดหน้า HTML จากคลาวด์
// เริ่มต้น API
var fileApi = groupdocs_viewer_cloud.FileApi.fromConfig(configuration);

// สร้างคำขอดาวน์โหลดไฟล์
let request = new groupdocs_viewer_cloud.DownloadFileRequest("/viewer/sample_xlsx/sample_page_1.html", myStorage);

// ดาวน์โหลดไฟล์
let response = await fileApi.downloadFile(request);

// บันทึกไฟล์รูปภาพในไดเร็กทอรีการทำงาน
fs.writeFile("C:\\Files\\viewer\\sample_xlsx\\sample_page_1.html", response, "binary", function (err) { });

แสดงข้อมูล Excel ใน HTML พร้อมลายน้ำโดยใช้ Node.js

เราสามารถเพิ่มข้อความลายน้ำในขณะที่แสดงข้อมูล Excel ไปยังหน้า HTML โดยทางโปรแกรมโดยทำตามขั้นตอนด้านล่าง:

  • ประการแรก สร้างอินสแตนซ์ของ ViewApi
  • จากนั้น สร้างอินสแตนซ์ของ FileInfo
  • จากนั้นตั้งค่าเส้นทางไฟล์อินพุต
  • จากนั้น สร้างอินสแตนซ์ของ ViewOptions
  • จากนั้น กำหนด FileInfo และตั้งค่า “HTML” เป็น viewFormat
  • จากนั้น สร้างและกำหนดอินสแตนซ์ของลายน้ำ
  • จากนั้นกำหนดขนาดลายน้ำและข้อความ
  • หลังจากนั้น สร้างคำขอดูโดยเรียกเมธอด CreateViewRequest โดยมี viewOptions เป็นอาร์กิวเมนต์
  • สุดท้าย เรียกเมธอด ViewApi.createView ด้วย CreateViewRequest เป็นอาร์กิวเมนต์เพื่อแสดง HTML

ตัวอย่างโค้ดต่อไปนี้แสดงวิธีแสดงข้อมูล Excel ใน HTML พร้อมลายน้ำโดยใช้ REST API ใน Node.js

// ตัวอย่างโค้ดนี้สาธิตวิธีการแสดง Excel ในหน้า HTML ด้วย Watermark
// การเริ่มต้น API
let viewApi = groupdocs_viewer_cloud.ViewApi.fromKeys(clientId, clientSecret);

// ไฟล์อินพุต
let fileInfo = new groupdocs_viewer_cloud.FileInfo();
fileInfo.filePath = "sample.xlsx";

// กำหนดตัวเลือกมุมมอง
let viewOptions = new groupdocs_viewer_cloud.ViewOptions();
viewOptions.fileInfo = fileInfo;
viewOptions.viewFormat = groupdocs_viewer_cloud.ViewOptions.ViewFormatEnum.HTML;

// ใส่ลายน้ำ
viewOptions.watermark = new groupdocs_viewer_cloud.Watermark();
viewOptions.watermark.size = 100;
viewOptions.watermark.text = "This is a sample watermark!";

// สร้างคำขอดู
let request = new groupdocs_viewer_cloud.CreateViewRequest(viewOptions);
// สร้างมุมมอง
let response = await viewApi.createView(request);

// แสดงเส้นทางหน้า HTML ที่แสดงผล
for (let page = 0; page < response.pages.length; page++) {
  console.log("Document rendered: " + response.pages[page].path);
}
แสดงข้อมูล Excel ใน HTML พร้อมลายน้ำโดยใช้ Node.js

แสดงข้อมูล Excel ใน HTML พร้อมลายน้ำโดยใช้ Node.js

ลองออนไลน์

โปรดลองใช้เครื่องมือแสดงผล Excel ออนไลน์ฟรีต่อไปนี้ ซึ่งพัฒนาโดยใช้ API ข้างต้น https://products.groupdocs.app/viewer/xlsx

บทสรุป

ในบทความนี้ เราได้เรียนรู้วิธีการแสดงข้อมูล Excel เป็น HTML บนคลาวด์ เราได้เห็นวิธีเพิ่มลายน้ำให้กับหน้า HTML ที่แสดงผลโดยใช้ Node.js บทความนี้ยังอธิบายวิธีการอัปโหลดไฟล์ XLSX ไปยังระบบคลาวด์โดยทางโปรแกรม จากนั้นดาวน์โหลดไฟล์ HTML ที่แสดงผลจากระบบคลาวด์ นอกจากนี้ คุณสามารถเรียนรู้เพิ่มเติมเกี่ยวกับ GroupDocs.Viewer Cloud API โดยใช้ เอกสารประกอบ นอกจากนี้ เรายังมีส่วน การอ้างอิง API ที่ช่วยให้คุณแสดงภาพและโต้ตอบกับ API ของเราได้โดยตรงผ่านเบราว์เซอร์ ในกรณีที่มีความคลุมเครือ โปรดติดต่อเราได้ที่ ฟอรัม

ดูสิ่งนี้ด้วย