Node.js + SpreadJS！從服務端生成Excel電子表格

Node.js是一個基於Chrome V8引擎的JavaScript運行環境，通常用於創建網絡應用程序。它可以同時處理多個連接，並且不像其他大多數模型那樣依賴線程。

對於 Web 開發者來說，從數據庫或Web服務器獲取數據，然後輸出到Excel文件以進行進一步分析的場景時有發生。我們的技術團隊在跟國內外各行各業用戶交流的過程中，就曾發現有很多的用戶嘗試在Node.js的環境下運行SpreadJS 純前端表格控件，藉助該控件，可以在服務器不預裝任何Excel依賴項的情況下，收集用戶輸入的信息，並將其自動導出到Excel文件中。

爲了滿足廣大技術愛好者的需要，同時減少大家在未來技術選型方面所走的彎路，本文將就SpreadJS 與 Node.js之間的技術性方案進行探討！

SpreadJS結合40餘年專業控件技術和在電子表格應用領域的經驗而推出的純前端表格控件，基於 HTML5，兼容 450 多種 Excel 公式，具備“高性能、跨平臺、與 Excel 高度兼容”的產品特性，備受華爲、明源雲、遠光軟件等知名企業青睞，被中國軟件行業協會認定爲“中國優秀軟件產品”。SpreadJS在界面和功能上與 Excel 高度類似，但又不侷限於 Excel，而是爲企業信息化系統提供表格文檔協同編輯、數據填報和類 Excel 報表設計的應用場景支持，極大降低了企業研發成本和項目交付風險。

獲取SpreadJS最新正式版下載

安裝SpreadJS和Node.js

首先，我們需要安裝Node.js以及Mock-Browser，BufferJS和FileReader，大家可以前往以下鏈接進行下載，同步操作：

我們將使用Visual Studio創建應用程序。打開Visual Studio後，使用JavaScript> Node.js>Blank Node.js控制檯應用程序模板創建一個新應用程序。這將自動創建所需的文件並打開“ app.js”文件，也是我們將要更改的唯一文件。

對於BufferJS庫，您需要下載該軟件包，然後通過導航到項目文件夾（一旦創建）並運行以下命令，將其手動安裝到項目中：

npm install

安裝完成後，您可能需要打開項目的package.json文件並將其添加到“ dependencies”部分。文件內容應如下所示：

{
"name": "spread-sheets-node-jsapp",
"version": "0.0.0",
"description": "SpreadSheetsNodeJSApp",
"main": "app.js",
"author": {
"name": "admin"
},
"dependencies": {
"FileReader": "^0.10.2",
"bufferjs": "1.0.0",
"mock-browser": "^0.92.14"
}
}

在此示例中，我們將使用Node.js的文件系統模塊。我們可以將其加載到：

var fs = require('fs')

爲了將SpreadJS與Node.js結合使用，我們還需要加載已安裝的Mock-Browser：

var mockBrowser =require('mock-browser').mocks.MockBrowser

在加載SpreadJS腳本之前，我們需要初始化模擬瀏覽器。初始化我們稍後在應用程序中可能需要使用的變量，尤其是“ window”變量：

global.window =mockBrowser.createWindow()
global.document = window.document
global.navigator = window.navigator
global.HTMLCollection =window.HTMLCollection
global.getComputedStyle =window.getComputedStyle

初始化FileReader庫：

var fileReader = require('filereader');
global.FileReader = fileReader;

使用SpreadJS npm包

將SpreadJS安裝文件中的SpreadJS Sheets和ExcelIO包添加到項目中。

您可以通過右鍵單擊解決方案資源管理器的“ npm”部分並將它們添加到您的項目中，然後選擇“安裝新的NPM軟件包”。您應該能夠搜索“ GrapeCity”並安裝以下2個軟件包：

@grapecity/spread-sheets
@grapectiy/spread-excelio

將SpreadJS npm軟件包添加到項目後，正確的依賴關係將被寫入package.json：

{
"name": "spread-sheets-node-jsapp",
"version": "0.0.0",
"description": "SpreadSheetsNodeJSApp",
"main": "app.js",
"author": {
"name": "admin"
},
"dependencies":{
"@grapecity/spread-excelio": "^11.2.1",
"@grapecity/spread-sheets": "^11.2.1",
"FileReader": "^0.10.2",
"bufferjs": "1.0.0",
"mock-browser": "^0.92.14"
}
}

現在我們需要在app.js文件中引入它：

var GC =require('@grapecity/spread-sheets')
var GCExcel =require('@grapecity/spread-excelio');

使用npm軟件包時，還需要設置許可證密鑰：

GC.Spread.Sheets.LicenseKey ="<YOUR KEY HERE>"

在這個特定的應用程序中，我們將向用戶顯示他們正在使用哪個版本的SpreadJS。爲此，我們可以引入package.json文件，然後引用依賴項以獲取版本號：

var packageJson =require('./package.json')
console.log('\n** Using Spreadjs Version"' + packageJson.dependencies["@grapecity/spread-sheets"] +'" **')

將Excel文件加載到您的Node.js應用程序中

點擊此處，下載現成的Excel模板文件，該文件包含了從用戶那裏獲取數據。接下來，將數據放入文件中並導出。在這種情況下，文件是用戶可以編輯的狀態。

初始化工作簿和ExcelIO變量：

var wb = new GC.Spread.Sheets.Workbook();
var excelIO = new GCExcel.IO();

我們在讀取文件時將代碼包裝在try / catch塊中。然後，初始化變量“ readline”，讓您讀取用戶輸入到控制檯的數據。接下來，我們將其存儲到一個JavaScript數組中，以便輕鬆填寫Excel文件：

// Instantiate the spreadsheet and modifyit
console.log('\nManipulatingSpreadsheet\n---');
try {
var file = fs.readFileSync('./content/billingInvoiceTemplate.xlsx');
excelIO.open(file.buffer, (data) => {
wb.fromJSON(data);
const readline = require('readline');
var invoice = {
generalInfo: [],
invoiceItems: [],
companyDetails: []
};
});
} catch (e) {
console.error("** Error manipulating spreadsheet **");
console.error(e);
}

收集用戶輸入信息

上圖顯示了我們正在使用的Excel文件。我們可以在excelio.open調用中創建一個單獨的函數，以在控制檯中提示用戶需要的每一項內容。我們也可以創建一個單獨的數組，將數據保存到每個輸入後，然後將其推送到我們創建的invoice.generalInfo數組中：

fillGeneralInformation();
function fillGeneralInformation() {
console.log("-----------------------\nFill in InvoiceDetails\n-----------------------")
const rl = readline.createInterface({
input: process.stdin,
output: process.stdout
});
var generalInfoArray = [];
rl.question('Invoice Number: ', (answer) => {
generalInfoArray.push(answer);
rl.question('Invoice Date (dd Month Year): ', (answer) => {
generalInfoArray.push(answer);
rl.question('Payment Due Date (ddMonth Year): ', (answer) => {
generalInfoArray.push(answer);
rl.question('Customer Name: ',(answer) => {
generalInfoArray.push(answer);
rl.question('CustomerCompany Name: ', (answer) => {
generalInfoArray.push(answer);
rl.question('Customer Street Address:', (answer) => {
generalInfoArray.push(answer);
rl.question('Customer City, State, Zip (<City>, <State Abbr><Zip>): ', (answer) => {
generalInfoArray.push(answer);
rl.question('Invoice Company Name: ', (answer) => {
generalInfoArray.push(answer);
rl.question('Invoice Street Address: ', (answer) => {
generalInfoArray.push(answer);
rl.question('Invoice City, State, Zip (<City>, <State Abbr><Zip>): ', (answer) => {
generalInfoArray.push(answer);
rl.close();
invoice.generalInfo.push({
"invoiceNumber": generalInfoArray[0],
"invoiceDate": generalInfoArray[1],
"paymentDueDate": generalInfoArray[2],
"customerName": generalInfoArray[3],
"customerCompanyName": generalInfoArray[4],
"customerStreetAddress": generalInfoArray[5],
"customerCityStateZip": generalInfoArray[6],
"invoiceCompanyName": generalInfoArray[7],
"invoiceStreetAddress": generalInfoArray[8],
"invoiceCityStateZip": generalInfoArray[9],
});
console.log("General Invoice Information Stored");
fillCompanyDetails();
});
});
});
});
});
});
});
});
});
});
}

該函數被稱爲“ fillCompanyDetails”，目的是收集有關公司的信息以填充到工作簿的第二張表中：

function fillCompanyDetails() {
console.log("-----------------------\nFill in CompanyDetails\n-----------------------")
const rl = readline.createInterface({
input: process.stdin,
output: process.stdout
});
var companyDetailsArray = []
rl.question('Your Name: ', (answer) => {
companyDetailsArray.push(answer);
rl.question('Company Name: ', (answer) => {
companyDetailsArray.push(answer);
rl.question('Address Line 1: ',(answer) => {
companyDetailsArray.push(answer);
rl.question('Address Line 2: ',(answer) => {
companyDetailsArray.push(answer);
rl.question('Address Line3: ', (answer) => {
companyDetailsArray.push(answer);
rl.question('AddressLine 4: ', (answer) => {
companyDetailsArray.push(answer);
rl.question('Address Line 5: ', (answer) => {
companyDetailsArray.push(answer);
rl.question('Phone: ', (answer) => {
companyDetailsArray.push(answer);
rl.question('Facsimile: ', (answer) => {
companyDetailsArray.push(answer);
rl.question('Website: ', (answer)=> {
companyDetailsArray.push(answer);
rl.question('Email: ', (answer) => {
companyDetailsArray.push(answer);
rl.question('Currency Abbreviation: ', (answer) => {
companyDetailsArray.push(answer);
rl.question('Beneficiary: ',(answer) => {
companyDetailsArray.push(answer);
rl.question('Bank: ', (answer) => {
companyDetailsArray.push(answer);
rl.question('Bank Address: ', (answer) => {
companyDetailsArray.push(answer);
rl.question('Account Number: ', (answer) => {
companyDetailsArray.push(answer);
rl.question('RoutingNumber: ', (answer) => {
companyDetailsArray.push(answer);
rl.question('Make Checks Payable To: ', (answer) => {
companyDetailsArray.push(answer);
rl.close();
invoice.companyDetails.push({
"yourName": companyDetailsArray[0],
"companyName": companyDetailsArray[1],
"addressLine1": companyDetailsArray[2],
"addressLine2": companyDetailsArray[3],
"addressLine3": companyDetailsArray[4],
"addressLine4": companyDetailsArray[5],
"addressLine5": companyDetailsArray[6],
"phone":companyDetailsArray[7],
"facsimile": companyDetailsArray[8],
"website":companyDetailsArray[9],
"email": companyDetailsArray[10],
"currencyAbbreviation":companyDetailsArray[11],
"beneficiary": companyDetailsArray[12],
"bank":companyDetailsArray[13],
"bankAddress": companyDetailsArray[14],
"accountNumber": companyDetailsArray[15],
"routingNumber": companyDetailsArray[16],
"payableTo": companyDetailsArray[17]
});
console.log("Invoice Company Information Stored");
console.log("-----------------------\nFillin Invoice Items\n-----------------------")
fillInvoiceItemsInformation();
});
});
});
});
});
});
});
});
});
});
});
});
});
});
});
});
});
});
}

現在我們已經有了用戶的基本信息，我們可以集中精力收集單個項目，並另命名爲“ fillInvoiceItemsInformation”函數。在每個項目執行之前，我們會詢問用戶是否要添加一個項目。如果他們繼續輸入“ y”，那麼我們將收集該項目的信息，然後再次詢問直到他們鍵入“ n”：

function fillInvoiceItemsInformation() {
const rl = readline.createInterface({
input: process.stdin,
output: process.stdout
});
var invoiceItemArray = [];
rl.question('Add item?(y/n): ', (answer) => {
switch (answer) {
case "y":
console.log("-----------------------\nEnter ItemInformation\n-----------------------");
rl.question('Quantity: ',(answer) => {
invoiceItemArray.push(answer);
rl.question('Details: ',(answer) => {
invoiceItemArray.push(answer);
rl.question('UnitPrice: ', (answer) => {
invoiceItemArray.push(answer);
invoice.invoiceItems.push({
"quantity":invoiceItemArray[0],
"details": invoiceItemArray[1],
"unitPrice": invoiceItemArray[2]
});
console.log("ItemInformation Added");
rl.close();
fillInvoiceItemsInformation();
});
});
});
break;
case "n":
rl.close();
return fillExcelFile();
break;
default:
console.log("Incorrectoption, Please enter 'y' or 'n'.");
}
});
}

填入您的Excel文件

在收集所有必需的用戶信息後，我們可以將其填入到Excel文件中：

function fillExcelFile() {
console.log("-----------------------\nFilling in Excelfile\n-----------------------");
fillBillingInfo();
fillCompanySetup();
}
function fillBillingInfo() {
var sheet = wb.getSheet(0);
sheet.getCell(0, 2).value(invoice.generalInfo[0].invoiceNumber);
sheet.getCell(1, 1).value(invoice.generalInfo[0].invoiceDate);
sheet.getCell(2, 2).value(invoice.generalInfo[0].paymentDueDate);
sheet.getCell(3, 1).value(invoice.generalInfo[0].customerName);
sheet.getCell(4, 1).value(invoice.generalInfo[0].customerCompanyName);
sheet.getCell(5, 1).value(invoice.generalInfo[0].customerStreetAddress);
sheet.getCell(6, 1).value(invoice.generalInfo[0].customerCityStateZip);
sheet.getCell(3, 3).value(invoice.generalInfo[0].invoiceCompanyName);
sheet.getCell(4, 3).value(invoice.generalInfo[0].invoiceStreetAddress);
sheet.getCell(5, 3).value(invoice.generalInfo[0].invoiceCityStateZip);
}
function fillCompanySetup() {
var sheet = wb.getSheet(1);
sheet.getCell(2, 2).value(invoice.companyDetails[0].yourName);
sheet.getCell(3, 2).value(invoice.companyDetails[0].companyName);
sheet.getCell(4, 2).value(invoice.companyDetails[0].addressLine1);
sheet.getCell(5, 2).value(invoice.companyDetails[0].addressLine2);
sheet.getCell(6, 2).value(invoice.companyDetails[0].addressLine3);
sheet.getCell(7, 2).value(invoice.companyDetails[0].addressLine4);
sheet.getCell(8, 2).value(invoice.companyDetails[0].addressLine5);
sheet.getCell(9, 2).value(invoice.companyDetails[0].phone);
sheet.getCell(10, 2).value(invoice.companyDetails[0].facsimile);
sheet.getCell(11, 2).value(invoice.companyDetails[0].website);
sheet.getCell(12, 2).value(invoice.companyDetails[0].email);
sheet.getCell(13, 2).value(invoice.companyDetails[0].currencyAbbreviation);
sheet.getCell(14, 2).value(invoice.companyDetails[0].beneficiary);
sheet.getCell(15, 2).value(invoice.companyDetails[0].bank);
sheet.getCell(16, 2).value(invoice.companyDetails[0].bankAddress);
sheet.getCell(17, 2).value(invoice.companyDetails[0].accountNumber);
sheet.getCell(18, 2).value(invoice.companyDetails[0].routingNumber);
sheet.getCell(19, 2).value(invoice.companyDetails[0].payableTo);
}

爲了防止用戶添加的數量超過工作表最大行數，我們可以在工作表中自動添加更多行。在設置數組中表單中的項目之前，默認添加行：

function fillInvoiceItems() {
var sheet = wb.getSheet(0);
var rowsToAdd = 0;
if (invoice.invoiceItems.length > 15) {
rowsToAdd = invoice.invoiceItems.length - 15;
sheet.addRows(22, rowsToAdd);
}
var rowIndex = 8;
if (invoice.invoiceItems.length >= 1) {
for (var i = 0; i < invoice.invoiceItems.length; i++) {
sheet.getCell(rowIndex,1).value(invoice.invoiceItems.quantity);
sheet.getCell(rowIndex,2).value(invoice.invoiceItems.details);
sheet.getCell(rowIndex,3).value(invoice.invoiceItems.unitPrice);
rowIndex++;
}
}
}

將文檔內容從Node.js導出到Excel文件

在工作簿中填寫完信息後，我們可以將工作簿導出到Excel文件中。爲此，我們將使用excelio打開功能。在這種情況下，只需將日期輸入文件名即可：

function exportExcelFile() {
excelIO.save(wb.toJSON(), (data) => {
fs.appendFileSync('Invoice' + new Date().valueOf() + '.xlsx', newBuffer(data), function (err) {
console.log(err);
});
console.log("Export success");
}, (err) => {
console.log(err);
}, { useArrayBuffer: true });
}

完成的文件將如下所示：

本文內容源自葡萄城

Node.js + SpreadJS！從服務端生成Excel電子表格

985 碩士程序員，空窗 4 個月沒有 Offer！

營銷系統黑名單優化：位圖的應用解析

一文搞懂 Spring 循環依賴

我真的從測試轉成了開發......

nginx添加相應配置，通過瀏覽器訪問或curl時返回客戶端對應公網IP

賽博鬥地主——使用大語言模型扮演Agent智能體玩牌類遊戲。

python內置函數——sorted

[oeasy]python020在遊戲中體驗數值自由_勇闖地下城_終端文字遊戲

爲何我建議你學會抄代碼

抖音面試：說說延遲任務的調度算法？

WinForm應用實戰開發指南 - 如何完成樹形列表（TreeList）的快捷綁定？

WPF應用實戰開發指南 - 如何結合阿里矢量圖標庫使用Geometry圖標？

WinForm應用實戰開發指南 - 如何實現類似事件總線的消息處理？

WinForm應用實戰開發指南 - 如何實現自定義用戶控件及自定義事件處理？

WPF應用實戰開發指南 - 如何完成附件管理

Mac下配置sublime實現LaTeX

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結