Tampilkan Data Excel dalam HTML menggunakan REST API di Node.js

HTML halaman web dapat dilihat di browser apa pun yang tersedia di perangkat genggam. Menampilkan data Excel di halaman HTML membantu menampilkan data kepada pemangku kepentingan yang relevan tanpa membagikan [spreadsheet Excel] yang sebenarnya2 dengan mereka. Jadi, mereka dapat melihat informasi/data yang diperlukan di browser apa pun dengan mudah. Pada artikel ini, kita akan mempelajari cara menampilkan data Excel di HTML menggunakan REST API di Node.js.

Topik-topik berikut akan dibahas dalam artikel ini:

Excel ke HTML Viewer REST API dan Node.js SDK

Untuk merender spreadsheet XLS atau XLSX, saya akan menggunakan Node.js SDK dari GroupDocs.Viewer Cloud API. Ini memungkinkan rendering dan melihat semua jenis dokumen populer dan format file gambar secara terprogram. Silakan instal menggunakan perintah berikut di konsol:

npm install groupdocs-conversion-cloud

Harap dapatkan ID dan Rahasia Klien Anda dari dasbor sebelum mengikuti langkah-langkah yang disebutkan. Setelah Anda memiliki ID dan rahasia Anda, tambahkan kode seperti yang ditunjukkan di bawah ini:

// Silakan dapatkan ID dan Rahasia Klien Anda dari dasbor dan tambahkan kode seperti yang ditunjukkan di bawah ini:
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";

Tampilkan Data Excel dalam HTML menggunakan REST API di Node.js

Kami dapat menampilkan data Excel dalam HTML dengan mengikuti langkah-langkah sederhana yang diberikan di bawah ini:

  1. Unggah file XLSX ke Cloud
  2. Tampilkan Data Excel dalam HTML menggunakan Node.js
  3. Unduh file yang dirender

Unggah Dokumen

Pertama, kami akan mengunggah file XLSX ke Cloud menggunakan contoh kode di bawah ini:

// Contoh kode ini menunjukkan cara mengunggah file XLSX ke Cloud
// Membangun FileApi
let fileApi = groupdocs_viewer_cloud.FileApi.fromConfig(configuration);
let resourcesFolder = 'C:\\Files\\viewer\\sample.xlsx';

// Baca file satu per satu
fs.readFile(resourcesFolder, (err, fileStream) => {
  // Buat permintaan unggah file
  let request = new groupdocs_viewer_cloud.UploadFileRequest("sample.xlsx", fileStream, myStorage);
  // Unggah data
  fileApi.uploadFile(request);
});

Akibatnya, file yang diunggah akan tersedia di bagian file dasbor di cloud.

Tampilkan Data Excel dalam HTML menggunakan Node.js

Kami dapat merender atau menampilkan data Excel pada halaman HTML secara terprogram dengan mengikuti langkah-langkah berikut:

  • Pertama, buat instance dari ViewApi.
  • Selanjutnya, buat instance FileInfo.
  • Kemudian, atur jalur file input.
  • Selanjutnya, buat instance dari ViewOptions.
  • Kemudian, tetapkan FileInfo dan atur “HTML” sebagai viewFormat.
  • Selanjutnya, buat instance dari HtmlOptions.
  • Kemudian, mulai dan tetapkan SpreadsheetOptions.
  • Selanjutnya atur berbagai pilihan seperti paginateSheets, textOverflowMode, renderGridLines, dll.
  • Setelah itu, buat permintaan tampilan dengan memanggil metode CreateViewRequest dengan viewOptions sebagai argumen.
  • Terakhir, panggil metode ViewApi.createView dengan CreateViewRequest sebagai argumen untuk merender HTML.

Contoh kode berikut menunjukkan cara menampilkan data Excel di HTML menggunakan REST API di Node.js.

// Contoh kode ini menunjukkan cara merender Excel di halaman HTML
// inisialisasi api
let viewApi = groupdocs_viewer_cloud.ViewApi.fromKeys(clientId, clientSecret);

// berkas masukan
let fileInfo = new groupdocs_viewer_cloud.FileInfo();
fileInfo.filePath = "sample.xlsx";

// Tentukan opsi tampilan
let viewOptions = new groupdocs_viewer_cloud.ViewOptions();
viewOptions.fileInfo = fileInfo;
viewOptions.viewFormat = groupdocs_viewer_cloud.ViewOptions.ViewFormatEnum.HTML;

// Tentukan opsi render
viewOptions.renderOptions = new groupdocs_viewer_cloud.HtmlOptions();

// Tentukan opsi rendering Spreadsheet
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;

// Buat permintaan tampilan
let request = new groupdocs_viewer_cloud.CreateViewRequest(viewOptions);
// Buat tampilan
let response = await viewApi.createView(request);

// Tampilkan jalur halaman HTML yang dirender
for (let page = 0; page < response.pages.length; page++) {
  console.log("Document rendered: " + response.pages[page].path);
}
Tampilkan Data Excel dalam HTML menggunakan Node.js

Tampilkan Data Excel dalam HTML menggunakan Node.js

Secara default, satu lembar kerja dirender menjadi satu halaman. Kami dapat menyesuaikan rendering Excel dengan menerapkan opsi berikut:

  • Menampilkan Lembar Kerja Excel menjadi Beberapa Halaman
viewOptions.renderOptions.spreadsheetOptions.paginateSheets = true;
viewOptions.renderOptions.spreadsheetOptions.countRowsPerPage = 45;
  • Tampilkan Garis Kisi dalam HTML
viewOptions.renderOptions.spreadsheetOptions.renderGridLines = true;
  • Render Baris dan Kolom Kosong
viewOptions.renderOptions.spreadsheetOptions.renderEmptyRows = true;
viewOptions.renderOptions.spreadsheetOptions.renderEmptyColumns = true;
  • Tampilkan Baris dan Kolom Tersembunyi
viewOptions.renderOptions.spreadsheetOptions.renderHiddenColumns = true;
viewOptions.renderOptions.spreadsheetOptions.renderHiddenRows = true;
  • Render Area Cetak Saja
viewOptions.renderOptions.spreadsheetOptions.renderPrintAreaOnly = true;
  • Setel Mode Luapan Teks
viewOptions.renderOptions.spreadsheetOptions.textOverflowMode = "HideText";

Unduh Halaman HTML

Contoh kode di atas akan menyimpan halaman HTML yang dirender di cloud. Itu dapat diunduh menggunakan contoh kode berikut:

// Contoh kode ini menunjukkan cara mengunduh halaman HTML dari Cloud
// Inisialisasi api
var fileApi = groupdocs_viewer_cloud.FileApi.fromConfig(configuration);

// Buat permintaan unduhan file
let request = new groupdocs_viewer_cloud.DownloadFileRequest("/viewer/sample_xlsx/sample_page_1.html", myStorage);

// Unduh berkas
let response = await fileApi.downloadFile(request);

// Simpan file gambar di direktori kerja
fs.writeFile("C:\\Files\\viewer\\sample_xlsx\\sample_page_1.html", response, "binary", function (err) { });

Tampilkan Data Excel dalam HTML dengan Watermark menggunakan Node.js

Kami dapat menambahkan teks tanda air sambil merender data Excel ke halaman HTML secara terprogram dengan mengikuti langkah-langkah berikut:

  • Pertama, buat instance dari ViewApi.
  • Selanjutnya, buat instance FileInfo.
  • Kemudian, atur jalur file input.
  • Selanjutnya, buat instance dari ViewOptions.
  • Kemudian, tetapkan FileInfo dan atur “HTML” sebagai viewFormat.
  • Selanjutnya, buat dan tetapkan instance Watermark.
  • Kemudian, atur ukuran dan teks tanda air.
  • Setelah itu, buat permintaan tampilan dengan memanggil metode CreateViewRequest dengan viewOptions sebagai argumen.
  • Terakhir, panggil metode ViewApi.createView dengan CreateViewRequest sebagai argumen untuk merender HTML.

Contoh kode berikut menunjukkan cara menampilkan data Excel dalam HTML dengan watermark menggunakan REST API di Node.js.

// Contoh kode ini menunjukkan cara merender Excel di halaman HTML dengan Watermark
// inisialisasi api
let viewApi = groupdocs_viewer_cloud.ViewApi.fromKeys(clientId, clientSecret);

// berkas masukan
let fileInfo = new groupdocs_viewer_cloud.FileInfo();
fileInfo.filePath = "sample.xlsx";

// Tentukan opsi tampilan
let viewOptions = new groupdocs_viewer_cloud.ViewOptions();
viewOptions.fileInfo = fileInfo;
viewOptions.viewFormat = groupdocs_viewer_cloud.ViewOptions.ViewFormatEnum.HTML;

// Tambahkan Tanda Air
viewOptions.watermark = new groupdocs_viewer_cloud.Watermark();
viewOptions.watermark.size = 100;
viewOptions.watermark.text = "This is a sample watermark!";

// Buat permintaan tampilan
let request = new groupdocs_viewer_cloud.CreateViewRequest(viewOptions);
// Buat tampilan
let response = await viewApi.createView(request);

// Tampilkan jalur halaman HTML yang dirender
for (let page = 0; page < response.pages.length; page++) {
  console.log("Document rendered: " + response.pages[page].path);
}
Tampilkan Data Excel dalam HTML dengan Watermark menggunakan Node.js

Tampilkan Data Excel dalam HTML dengan Watermark menggunakan Node.js

Coba Daring

Silakan coba alat rendering Excel online gratis berikut, yang dikembangkan menggunakan API di atas. https://products.groupdocs.app/viewer/xlsx

Kesimpulan

Pada artikel ini, kami telah mempelajari cara menampilkan data Excel sebagai HTML di cloud. Kami juga telah melihat cara menambahkan tanda air ke halaman HTML yang dirender menggunakan Node.js. Artikel ini juga menjelaskan cara mengunggah file XLSX ke cloud secara terprogram dan kemudian mengunduh file HTML yang dirender dari Cloud. Selain itu, Anda dapat mempelajari lebih lanjut tentang GroupDocs.Viewer Cloud API menggunakan dokumentasi. Kami juga menyediakan bagian Referensi API yang memungkinkan Anda memvisualisasikan dan berinteraksi dengan API kami secara langsung melalui browser. Jika ada ambiguitas, jangan ragu untuk menghubungi kami di forum.

Lihat juga