Le pagine Web HTML possono essere visualizzate in qualsiasi browser disponibile sui dispositivi portatili. La visualizzazione dei dati Excel nelle pagine HTML aiuta a mostrare i dati alle parti interessate senza condividere con loro il foglio di calcolo Excel. Pertanto, potrebbero visualizzare facilmente le informazioni/i dati richiesti in qualsiasi browser. In questo articolo impareremo come visualizzare i dati di Excel in HTML utilizzando un’API REST in Node.js.
In questo articolo saranno trattati i seguenti argomenti:
- API REST del visualizzatore da Excel a HTML e Node.js SDK
- Visualizza i dati di Excel in HTML utilizzando l’API REST in Node.js
- Visualizza i dati di Excel in HTML con filigrana in Node.js
API REST del visualizzatore da Excel a HTML e Node.js SDK
Per il rendering dei fogli di calcolo XLS o XLSX, utilizzerò l’API Node.js SDK of GroupDocs.Viewer Cloud. Consente il rendering e la visualizzazione di tutti i tipi di documenti popolari e formati di file immagine a livello di codice. Si prega di installarlo utilizzando il seguente comando nella console:
npm install groupdocs-conversion-cloud
Si prega di ottenere l’ID cliente e il segreto dalla dashboard prima di seguire i passaggi menzionati. Una volta che hai il tuo ID e segreto, aggiungi il codice come mostrato di seguito:
// Ottieni il tuo ID cliente e segreto dalla dashboard e aggiungi il codice come mostrato di seguito:
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";
Visualizza i dati di Excel in HTML utilizzando l’API REST in Node.js
Possiamo visualizzare i dati di Excel in HTML seguendo i semplici passaggi indicati di seguito:
- Carica il file XLSX sul Cloud
- Visualizza dati Excel in HTML utilizzando Node.js
- Scarica il file renderizzato
Carica il documento
Innanzitutto, caricheremo il file XLSX nel Cloud utilizzando l’esempio di codice fornito di seguito:
// Questo esempio di codice dimostra come caricare il file XLSX nel cloud
// Costruisci FileApi
let fileApi = groupdocs_viewer_cloud.FileApi.fromConfig(configuration);
let resourcesFolder = 'C:\\Files\\viewer\\sample.xlsx';
// Leggi i file uno per uno
fs.readFile(resourcesFolder, (err, fileStream) => {
// Crea richiesta di caricamento file
let request = new groupdocs_viewer_cloud.UploadFileRequest("sample.xlsx", fileStream, myStorage);
// Caricare un file
fileApi.uploadFile(request);
});
Di conseguenza, il file caricato sarà disponibile nella sezione file della dashboard sul cloud.
Visualizza i dati di Excel in HTML utilizzando Node.js
Possiamo eseguire il rendering o visualizzare i dati di Excel su pagine HTML a livello di codice seguendo i passaggi indicati di seguito:
- Innanzitutto, crea un’istanza di ViewApi.
- Successivamente, crea un’istanza di FileInfo.
- Quindi, imposta il percorso del file di input.
- Successivamente, crea un’istanza di ViewOptions.
- Quindi, assegna FileInfo e imposta “HTML” come viewFormat.
- Successivamente, crea un’istanza di HtmlOptions.
- Quindi, avvia e assegna SpreadsheetOptions.
- Successivamente, imposta varie opzioni come paginateSheets, textOverflowMode, renderGridLines, ecc.
- Successivamente, crea una richiesta di visualizzazione chiamando il metodo CreateViewRequest con viewOptions come argomento.
- Infine, chiama il metodo ViewApi.createView con CreateViewRequest come argomento per eseguire il rendering dell’HTML.
L’esempio di codice seguente mostra come visualizzare i dati di Excel in HTML utilizzando un’API REST in Node.js.
// Questo esempio di codice dimostra come eseguire il rendering di Excel nella pagina HTML
// Inizializzazione dell'API
let viewApi = groupdocs_viewer_cloud.ViewApi.fromKeys(clientId, clientSecret);
// File di input
let fileInfo = new groupdocs_viewer_cloud.FileInfo();
fileInfo.filePath = "sample.xlsx";
// Definire le opzioni di visualizzazione
let viewOptions = new groupdocs_viewer_cloud.ViewOptions();
viewOptions.fileInfo = fileInfo;
viewOptions.viewFormat = groupdocs_viewer_cloud.ViewOptions.ViewFormatEnum.HTML;
// Definire le opzioni di rendering
viewOptions.renderOptions = new groupdocs_viewer_cloud.HtmlOptions();
// Definire le opzioni di rendering del foglio di calcolo
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;
// Crea richiesta di visualizzazione
let request = new groupdocs_viewer_cloud.CreateViewRequest(viewOptions);
// Crea vista
let response = await viewApi.createView(request);
// Visualizza il percorso delle pagine HTML renderizzate
for (let page = 0; page < response.pages.length; page++) {
console.log("Document rendered: " + response.pages[page].path);
}
Visualizza i dati di Excel in HTML utilizzando Node.js
Per impostazione predefinita, un foglio di lavoro viene visualizzato in una pagina. Possiamo personalizzare il rendering di Excel applicando le seguenti opzioni:
- Visualizza un foglio di lavoro Excel in più pagine
viewOptions.renderOptions.spreadsheetOptions.paginateSheets = true;
viewOptions.renderOptions.spreadsheetOptions.countRowsPerPage = 45;
- Mostra griglia in HTML
viewOptions.renderOptions.spreadsheetOptions.renderGridLines = true;
- Rendering di righe e colonne vuote
viewOptions.renderOptions.spreadsheetOptions.renderEmptyRows = true;
viewOptions.renderOptions.spreadsheetOptions.renderEmptyColumns = true;
- Mostra righe e colonne nascoste
viewOptions.renderOptions.spreadsheetOptions.renderHiddenColumns = true;
viewOptions.renderOptions.spreadsheetOptions.renderHiddenRows = true;
- Render Solo area di stampa
viewOptions.renderOptions.spreadsheetOptions.renderPrintAreaOnly = true;
- Imposta la modalità di overflow del testo
viewOptions.renderOptions.spreadsheetOptions.textOverflowMode = "HideText";
Scarica pagine HTML
L’esempio di codice precedente salverà le pagine HTML visualizzate nel cloud. Può essere scaricato utilizzando il seguente esempio di codice:
// Questo esempio di codice dimostra come scaricare una pagina HTML dal cloud
// Inizializza api
var fileApi = groupdocs_viewer_cloud.FileApi.fromConfig(configuration);
// Crea richiesta di download del file
let request = new groupdocs_viewer_cloud.DownloadFileRequest("/viewer/sample_xlsx/sample_page_1.html", myStorage);
// Download file
let response = await fileApi.downloadFile(request);
// Salva il file immagine nella directory di lavoro
fs.writeFile("C:\\Files\\viewer\\sample_xlsx\\sample_page_1.html", response, "binary", function (err) { });
Visualizza i dati di Excel in HTML con filigrana utilizzando Node.js
Possiamo aggiungere un testo in filigrana durante il rendering dei dati di Excel nelle pagine HTML a livello di codice seguendo i passaggi indicati di seguito:
- Innanzitutto, crea un’istanza di ViewApi.
- Successivamente, crea un’istanza di FileInfo.
- Quindi, imposta il percorso del file di input.
- Successivamente, crea un’istanza di ViewOptions.
- Quindi, assegna FileInfo e imposta “HTML” come viewFormat.
- Successivamente, crea e assegna un’istanza della filigrana.
- Quindi, imposta la dimensione e il testo della filigrana.
- Successivamente, crea una richiesta di visualizzazione chiamando il metodo CreateViewRequest con viewOptions come argomento.
- Infine, chiama il metodo ViewApi.createView con CreateViewRequest come argomento per eseguire il rendering dell’HTML.
L’esempio di codice seguente mostra come visualizzare i dati di Excel in HTML con filigrana utilizzando un’API REST in Node.js.
// Questo esempio di codice dimostra come eseguire il rendering di Excel nella pagina HTML con filigrana
// Inizializzazione dell'API
let viewApi = groupdocs_viewer_cloud.ViewApi.fromKeys(clientId, clientSecret);
// File di input
let fileInfo = new groupdocs_viewer_cloud.FileInfo();
fileInfo.filePath = "sample.xlsx";
// Definire le opzioni di visualizzazione
let viewOptions = new groupdocs_viewer_cloud.ViewOptions();
viewOptions.fileInfo = fileInfo;
viewOptions.viewFormat = groupdocs_viewer_cloud.ViewOptions.ViewFormatEnum.HTML;
// Aggiungi filigrana
viewOptions.watermark = new groupdocs_viewer_cloud.Watermark();
viewOptions.watermark.size = 100;
viewOptions.watermark.text = "This is a sample watermark!";
// Crea richiesta di visualizzazione
let request = new groupdocs_viewer_cloud.CreateViewRequest(viewOptions);
// Crea vista
let response = await viewApi.createView(request);
// Visualizza il percorso delle pagine HTML renderizzate
for (let page = 0; page < response.pages.length; page++) {
console.log("Document rendered: " + response.pages[page].path);
}
Visualizza i dati di Excel in HTML con filigrana utilizzando Node.js
Prova in linea
Prova il seguente strumento di rendering Excel online gratuito, sviluppato utilizzando l’API di cui sopra. https://products.groupdocs.app/viewer/xlsx
Conclusione
In questo articolo, abbiamo imparato come visualizzare i dati di Excel come HTML sul cloud. Abbiamo anche visto come aggiungere watermark alle pagine HTML renderizzate utilizzando Node.js. Questo articolo spiega anche come caricare a livello di codice un file XLSX nel cloud e quindi scaricare il file HTML di cui è stato eseguito il rendering dal cloud. Inoltre, puoi saperne di più su GroupDocs.Viewer Cloud API utilizzando la documentazione. Forniamo anche una sezione Riferimento API che ti consente di visualizzare e interagire con le nostre API direttamente attraverso il browser. In caso di qualsiasi ambiguità, non esitate a contattarci sul forum.