고급기능 Node.js 응용 프로그램에서 Excel 시트를 생성하는 방법
페이지 정보
작성자 GrapeCity 작성일 2021-08-23 16:38 조회 1,606회 댓글 0건본문
첨부파일
관련링크
를 사용하면 서버에 Excel이 없어도 이 작업을 수행할 수 있습니다.
Node.js는 일반적으로 네트워크 응용 프로그램을 만드는 데 많이 사용되는 이벤트 기반 JavaScript 런타임입니다. 여러 연결을 동시에 처리할 수 있으며 대부분의 다른 모델처럼 스레드에 의존하지 않습니다.
이 튜토리얼에서는 SpreadJS를 사용하여 사용자가 입력한 정보를 수집하고 Node.js 응용 프로그램에서 자동으로 Excel 파일로 내보냅니다. SpreadJS를 사용하면 SpreadJS 또는 Node.js 사용 여부가 성능에 영향을 미치지 않습니다.
이 프로젝트의 샘플 zip은 .
SpreadJS 및 Node.js 시작하기
시작하려면 Node.js와 Mock-Browser, BufferJS, FileReader를 설치해야 하며, 모두 다음 링크에서 찾을 수 있습니다.
Visual Studio 2019를 사용하여 응용 프로그램을 만들 예정입니다.
Visual Studio가 열리면 새 프로젝트 만들기를 사용하여 새 응용 프로그램을 만든 다음 "Blank Node.js Console Application"을 검색하십시오. 이름을 지정한 다음 프로젝트를 만들 위치를 지정하십시오.
그러면 필요한 파일이 자동으로 생성되고 "app.js" 파일이 열립니다. 이 파일만 변경할 것입니다.
프로젝트에 패키지를 설치하려면 Solution Explorer에서 "npm" 헤더를 마우스 오른쪽 버튼으로 클릭하고 새 npm 패키지 설치를 클릭한 다음 "Mock-Browser", "BufferJS" 및 "FileReader"에 대한 각 패키지를 검색 및 설치합니다.
설치한 후에는 package.json file에서 종속성이 업데이트됩니다.
{ "name": "spread-jsnode-js", "version": "0.0.0", "description": "SpreadJSNodeJS", "main": "app.js", "author": { "name": "" }, "dependencies": { "bufferjs": "^3.0.1", "filereader": "^0.10.3", "mock-browser": "^0.92.14" } }
이 샘플에서는 Node.js의 파일 시스템 모듈을 사용할 것입니다. 다음 위치에 로드할 수 있습니다.
var fs = require('fs');
SpreadJS와 Node.js를 사용하기 위해 설치한 Mock-Browser를 로드합니다.
var mockBrowser = require('mock-browser').mocks.MockBrowser;
SpreadJS 스크립트를 로드하기 전에 mock-browser를 초기화해야 합니다.
응용 프로그램 뒷부분에서 필요할 수 있는 변수, 특히 "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 Sheets 및 ExcelIO 패키지를 프로젝트에 추가해야 합니다.
Solution Explorer에서 "npm" 섹션을 마우스 오른쪽 버튼으로 클릭하고 새 npm 패키지 설치를 선택하여 프로젝트에 추가할 수 있습니다. "GrapeCity"를 검색하고 다음 2개의 패키지를 설치할 수 있습니다.
@grapecity/spread-sheets
@grapectiy/spread-excelio
SpreadJS npm 패키지가 프로젝트에 추가된 후에 package.json은 올바른 종속성을 사용하여 자동으로 업로드되어야 합니다.
{ "name": "spread-jsnode-js", "version": "0.0.0", "description": "SpreadJSNodeJS", "main": "app.js", "author": { "name": "" }, "dependencies": { "@grapecity/spread-excelio": "^14.1.2", "@grapecity/spread-sheets": "^14.1.2", "bufferjs": "^3.0.1", "filereader": "^0.10.3", "mock-browser": "^0.92.14" } }
이제 app.js 파일에서 다음 작업을 수행해야 합니다.
var GC = require('@grapecity/spread-sheets'); var SJSExcel = require('@grapecity/spread-excelio');
npm 패키지를 사용할 때 다음 두 가지에 대한 라이선스 키도 설정해야 합니다.
GC.Spread.Sheets.LicenseKey = "<YOUR KEY HERE>"; SJSExcel.LicenseKey = "<YOUR KEY HERE>";
이 응용 프로그램에서는 사용 중인 SpreadJS 버전을 사용자에게 보여줍니다.
그러려면 package.json 파일이 필요할 수 있고, 종속성을 참조하여 버전 번호를 가져옵니다.
var packageJson = require('./package.json'); console.log('\n** Using SpreadJS Version "' + packageJson.dependencies["@grapecity/spread-sheets"] + '" **');
Node.js 응용 프로그램으로 Excel 파일 로드
기존 Excel 템플릿 파일을 로드하여 사용자로부터 데이터를 가져옵니다. 그런 다음 데이터를 파일로 저장하고 내보냅니다. 이 경우 파일은 사용자가 편집할 수 있는 송장이 됩니다.
통합 문서와 Excel IO 변수를 초기화하는 것부터 시작합니다.
var wb = new GC.Spread.Sheets.Workbook(); var excelIO = new SJSExcel.IO();
파일에서 읽은 대로 코드를 시도/캐치 블록으로 줄바꿈해 보겠습니다.
그런 다음 "readline" 변수를 초기화할 수 있습니다. 이것은 사용자가 콘솔에 입력한 데이터를 읽을 수 있도록 하는 라이브러리입니다.
다음으로 Excel 파일을 쉽게 작성하는 데 사용할 수 있는 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); }
사용자 입력 수집
위 이미지는 사용 중인 Excel 파일입니다.
첫 번째로 수집하고자 하는 정보는 일반적인 송장 정보입니다.
excelio.open 호출 내에서 필요한 각 항목에 대해 콘솔의 사용자에게 확인 대화 상자를 표시하기 위해 별도의 함수를 만들 수 있습니다.
각 입력 후에 해당 섹션에 대한 모든 입력이 있을 때 데이터를 저장할 별도의 배열을 만들 수 있습니다. 생성한 invoice.generalInfo 배열로 푸시합니다.
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(); }); }); }); }); }); }); }); }); }); }); }
"fillCompanyDetails" 함수에서 회사에 대한 정보를 수집하여 통합 문서의 두 번째 시트를 작성합니다.
이 함수는 이전 함수와 매우 유사합니다.
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(); }); }); }); }); }); }); }); }); }); }); }); }); }); }); }); }); }); }); }
이제 송장에 대한 기본 정보를 얻었으므로 개별 송장 항목을 수집하는 데 집중할 수 있습니다.
이 항목은 "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 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'."); } }); }
Excel 파일 채우기
필요한 송장 정보를 모두 수집한 후에는 Excel 파일을 작성할 수 있습니다. 청구 정보 및 회사 설정의 경우 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); }
우리가 사용하는 템플릿에는 송장의 항목에 대해 정해진 수의 행이 배치되어 있습니다.
최댓값보다 많이 추가하려면 시트에 행을 더 추가하면 됩니다.
배열에서 시트의 항목을 설정하기 전에 행을 추가합니다.
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++; } } }
Excel로 Node.js 내보내기
통합 문서에 정보를 입력한 후에는 통합 문서를 Excel 파일로 내보낼 수 있습니다. 이 작업에는 excelio open 함수를 사용할 것입니다. 이 경우 파일 이름에 날짜를 입력하면 됩니다.
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 }); }
위의 코드 조각으로 통합 문서를 Excel 파일로 내보낼 수 있습니다. 완료된 파일은 다음과 같습니다.
문자열의 SpreadJS와 Node.js를 사용하는 것은 SpreadJS의 다기능성과 확장성을 증명하는 예입니다. 관련 문서, 데모, 비디오 및 튜토리얼은 를 참조하십시오.
지금 바로 SpreadJS를 다운로드하여 직접 테스트해보세요!
댓글목록
등록된 댓글이 없습니다.