Node.js 애플리케이션에서 Excel 시트를 생성하는 방법
페이지 정보
작성자 GrapeCity
작성일 2018-07-26 00:00 조회 4,127회
댓글 0건
본문
첨부파일
관련링크
Node.js 애플리케이션에서 Excel 파일을 생성해야하는 경우가 있습니다. 데이터베이스 또는 웹 서비스에서 데이터를 가져온 다음 추가보고 또는 분석을 위해, Excel 파일로 출력해야할 수도 있습니다. SpreadJS 는 서버에 의존하지 않고 Excel 기능을 구현 가능하게 합니다.
Node.js는 일반적으로 네트워크 응용 프로그램을 만드는 데 사용되는 인기있는 이벤트 중심 JavaScript 런타임입니다. 동시에 여러 연결을 처리할 수 있으며, 대부분의 다른 모델과 마찬가지로 스레드에 의존하지 않습니다.
이 튜토리얼에서는 Spread.Sheets를 사용하여 사용자가 입력 한 정보를 수집하고, 이를 Node.js 애플리케이션의 Excel 파일로 자동으로 내보낼 수 있도록 구현해보겠습니다.
SpreadJS 및 Node.js 시작하기
먼저 Node.js와 Mock-Browser, BufferJS 및 FileReader를 설치해야합니다. 각 링크는 다음 링크에서 찾을 수 있습니다.
이 포스팅에서는 Visual Studio를 사용하여 응용 프로그램을 만들겠습니다. (원하시는 경우, 익숙하신 IDE를 사용하셔도됩니다) Visual Studio가 열리면 JavaScript> Node.js> Blank Node.js 콘솔 애플리케이션 템플릿를 사용하여 새 애플리케이션을 작성하십시오 . 이렇게하면 필요한 파일이 자동으로 생성되고“app.js”파일이 열립니다. 이 파일은 우리가 변경할 유일한 파일입니다.
BufferJS 라이브러리의 경우 해당 패키지를 다운로드 한 다음, 프로젝트 폴더로 이동 한 후, 다음 명령을 실행하여 수동으로 패키지를 설치해야합니다.
설치가 완료되면 프로젝트의 package.json 파일을 열고 "종속성"섹션에 추가해야합니다. 다음과 같이 작성합니다.
<pre><code class="language-javascript">
{
"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"
}
}
</code></pre>
이 샘플에서는 Node.js의 File System Module을 사용합니다. 아래와 같이 로드합니다:
<pre><code class="language-javascript">
var fs = require('fs')
</code></pre>
Node.js와 함께 SpreadJS를 사용하기 위해, 설치 한 Mock-Browser를 로드합니다.
<pre><code class="language-javascript">
var mockBrowser = require('mock-browser').mocks.MockBrowser
</code></pre>
SpreadJS 스크립트를로드하기 전에 Mock-Browser를 초기화해야합니다. 응용 프로그램에서 나중에 사용해야 할 변수, 특히 "window"변수를 아래와 같이 초기화합니다.
<pre><code class="language-javascript">
global.window = mockBrowser.createWindow()
global.document = window.document
global.navigator = window.navigator
global.HTMLCollection = window.HTMLCollection
global.getComputedStyle = window.getComputedStyle
</code></pre>
FileReader 라이브러리를 초기화하십시오.
<pre><code class="language-javascript">
var fileReader = require('filereader');
global.FileReader = fileReader;
</code></pre>
SpreadJS npm 패키지 사용
SpreadJS 시트 및 ExcelIO 패키지를 프로젝트에 추가해야합니다.
솔루션 탐색기의 "npm"섹션을 마우스 오른쪽 버튼으로 클릭하고 "새 NPM 패키지 설치(Install New NPM Packages)"를 선택하여 프로젝트에 추가 할 수 있습니다. "GrapeCity"를 검색하고 다음 2 개의 패키지를 설치하니다.
@grapecity/spread-sheets
@grapectiy/spread-excelio
SpreadJS npm 패키지가 프로젝트에 추가되면, package.json에 올바른 종속성으로 자동 업로드 됩니다.
<pre><code class="language-javascript">
{
"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"
}
}
</code></pre>
이제 app.js 파일에서, 아래와 같이 require을 통해 선언합니다:
<pre><code class="language-javascript">
var GC = require('@grapecity/spread-sheets')
var GCExcel = require('@grapecity/spread-excelio');
</code></pre>
npm 패키지를 사용하는 경우, 아래와 같이 라이센스 키도 설정해야합니다. (배포 시)
<pre><code class="language-javascript">
GC.Spread.Sheets.LicenseKey = "<YOUR KEY HERE>"
</code></pre>
이 응용 프로그램에서는 사용중인 SpreadJS 버전을 사용자에게 보여주기 위해, package.json 파일이 필요하고 버전 번호를 얻기 위해 종속성을 참조 할 수 있습니다.
<pre><code class="language-javascript">
var packageJson = require('./package.json')
console.log('\n** Using Spreadjs Version "' + packageJson.dependencies["@grapecity/spread-sheets"] + '" **')
</code></pre>Node.js 애플리케이션으로 Excel 파일로드
기존에 사용자가 가지고있던 Excel 템플릿 파일사용하고, 데이터는 사용자로 부터 받아올 것입니다. 그런 다음 데이터를 파일에 넣고 내보기를 구현할 것입니다. 이 예제에서는 송장파일을 이용할 예정이니다.
통합 문서(Workbook) 및 Excel IO 변수를 초기화하여 시작하십시오.
<pre><code class="language-javascript">
var wb = new GC.Spread.Sheets.Workbook();
var excelIO = new GCExcel.IO();
</code></pre>
파일을 읽을 때 코드를 try / catch 블록으로 감싸줍니다. 그런 다음 변수 "readline"을 초기화 할 수 있습니다. 기본적으로 사용자가 콘솔에 입력 한 데이터를 읽을 수있는 라이브러리입니다. 다음으로 Excel 파일을 쉽게 채우는 데 사용할 수 있도록 JavaScript 배열에 저장합니다.
<pre><code class="language-javascript">
// Instantiate the spreadsheet and modify it
console.log('\nManipulating Spreadsheet\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);
}
</code></pre>
사용자 입력 수집
위 이미지는 사용할 Excel 파일을 보여줍니다. 우리가 수집하고자하는 첫 번째 정보는 일반적인 송장 정보입니다. excelio.open 호출 내에서 별도의 함수(function)을 만들어 콘솔에서 사용자에게 필요한 각 항목을 프롬프트(prompt) 할 수 있습니다. 입력 후에 데이터를 저장하기 위해 별도의 배열을 생성 한 다음, 해당 섹션에 대한 모든 입력에 대해서 데이터를 저장할 수 있습니다. 우리가 만든 invoice.generalInfo 배열로 푸시(push)하십시오.
<pre><code class="language-javascript">
fillGeneralInformation();
function fillGeneralInformation() {
console.log("-----------------------\nFill in Invoice Details\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 (dd Month Year): ', (answer) => {
generalInfoArray.push(answer);
rl.question('Customer Name: ', (answer) => {
generalInfoArray.push(answer);
rl.question('Customer Company 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();
});
});
});
});
});
});
});
});
});
});
}
</code></pre>
이 함수 내에서 "fillCompanyDetails"은 회사에 대한 정보를 수집하여, 통합 문서(workbook)의 두 번째 시트에 채웁니다. 이 기능은 이전 기능과 매우 유사합니다.
<pre><code class="language-javascript">
function fillCompanyDetails() {
console.log("-----------------------\nFill in Company Details\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 Line 3: ', (answer) => {
companyDetailsArray.push(answer);
rl.question('Address Line 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('Routing Number: ', (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("-----------------------\nFill in Invoice Items\n-----------------------")
fillInvoiceItemsInformation();
});
});
});
});
});
});
});
});
});
});
});
});
});
});
});
});
});
});
}
</code></pre>
이제 송장에 대한 기본 정보를 갖을 수 있데 되었습니다. 다음으로 "fillInvoiceItemsInformation"이라는 함수를 통해 개별 송장 품목 수집에 중점을 둘 수 있습니다. 각 항목 전에 사용자에게 항목을 추가 할 것인지 묻습니다. "y"를 계속 입력하면 해당 항목의 정보를 수집 한 다음 "n"을 입력 할 때까지 다시 묻습니다.
<pre><code class="language-javascript">
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 Item Information\n-----------------------");
rl.question('Quantity: ', (answer) => {
invoiceItemArray.push(answer);
rl.question('Details: ', (answer) => {
invoiceItemArray.push(answer);
rl.question('Unit Price: ', (answer) => {
invoiceItemArray.push(answer);
invoice.invoiceItems.push({
"quantity": invoiceItemArray[0],
"details": invoiceItemArray[1],
"unitPrice": invoiceItemArray[2]
});
console.log("Item Information Added");
rl.close();
fillInvoiceItemsInformation();
});
});
});
break;
case "n":
rl.close();
return fillExcelFile();
break;
default:
console.log("Incorrect option, Please enter 'y' or 'n'.");
}
});
}
</code></pre>
엑셀 파일 작성
필요한 송장 정보가 모두 수집되면 Excel 파일에 해당 정보를 채울 수 있습니다. 청구 정보 및 회사 설정을 위해 JavaScript 배열에서 셀의 각 값을 수동으로 설정할 수 있습니다.
<pre><code class="language-javascript">
function fillExcelFile() {
console.log("-----------------------\nFilling in Excel file\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);
}
</code></pre>
우리가 사용하는 템플릿에는 송장의 항목에 대해 특정 수의 행(Rows)이 배치되어 있습니다. 사용자가 시트에 최대 값보다 더 많은 행을 추가할 수 있습니다. 배열에서 시트의 항목을 설정하기 전에 행을 추가합니다.
<pre><code class="language-javascript">
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[i].quantity);
sheet.getCell(rowIndex, 2).value(invoice.invoiceItems[i].details);
sheet.getCell(rowIndex, 3).value(invoice.invoiceItems[i].unitPrice);
rowIndex++;
}
}
}
</code></pre>
Node.js를 Excel로 내보내기
통합 문서에 정보가 채워지면 통합 문서를 Excel 파일로 내보낼 수 있습니다. 이를 위해 Excelio의 Open 함수를 사용합니다. 아래에서는 파일 이름에 날짜를 입력할 것입니다.
<pre><code class="language-javascript">
function exportExcelFile() {
excelIO.save(wb.toJSON(), (data) => {
fs.appendFileSync('Invoice' + new Date().valueOf() + '.xlsx', new Buffer(data), function (err) {
console.log(err);
});
console.log("Export success");
}, (err) => {
console.log(err);
}, { useArrayBuffer: true });
}
</code></pre>
위의 코드 스니펫(snippet)을 사용하여 통합 문서를 Excel 파일로 내보낼 수 있습니다.
완성 된 파일은 다음과 같습니다.
SpreadJS를 Node.js와 함께 사용하면 SpreadJS의 다목적성과 확장성을 활용할 수 있습니다.
댓글목록
등록된 댓글이 없습니다.
