JavaScript를 사용하여 Excel XLSX를 가져오고 내보내는 방법

JavaScript는 클라이언트 측 스크립팅 도구를 쉽게 사용자 정의할 수 있는 다목적 플랫폼입니다. 일부 응용 프로그램에서는 코딩 및 유지 관리가 쉬운 일종의 스프레드시트 인터페이스가 있으면 유용합니다. SpreadJS client-side JavaScript spreadsheet component 이것에 완벽합니다.

이 블로그에서는 다음 단계에 따라 JavaScript에서 Excel로 가져오기/내보내기하는 방법을 다룹니다.

Set Up the JavaScript Spreadsheet Project

Add Excel Import Code

Add Data to the Imported Excel File

Add a Sparkline

Add Excel Export Code

JavaScript 스프레드시트 프로젝트 설정

To start, we can use the SpreadJS files hosted on NPM. To do this, we can install using a command line argument. Open a command prompt and navigate to the location of your application. There, you can install the required files with one command.

In this case, we need the base Spread-Sheets library, Spread-ExcelIO, and jQuery:

npm i @grapecity/spread-sheets @grapecity/spread-excelio jquery

SpreadJS isn’t dependent on jQuery, but in this case, we use it for the easy cross-origin-request support, which we will review later.

Once those are installed, we can add references to those script and CSS files in our code:

    <!DOCTYPE html>  
    <html>  
    <head>  
        <title>SpreadJS ExcelIO</title>
        <script src="./node_modules/jquery/dist/jquery.min.js" type="text/javascript"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2014-11-29/FileSaver.min.js"></script>

        <link href="./node_modules/@grapecity/spread-sheets/styles/gc.spread.sheets.excel2013white.css" rel="stylesheet" type="text/css" />
        <script type="text/javascript" src="./node_modules/@grapecity/spread-sheets/dist/gc.spread.sheets.all.min.js"></script>
        <script type="text/javascript" src="./node_modules/@grapecity/spread-excelio/dist/gc.spread.excelio.min.js"></script>

    </head>  
    <body>  
        <div id="ss" style="height:600px; width :100%; "></div>  
    </body>  
    </html>

We will also need the FileSaver library, which we have imported in addition to the SpreadJS and jQuery files.

Then we can add a script to the page that initializes the Spread.Sheets component and a div element to contain it (since the SpreadJS spreadsheet component utilizes a canvas, this is necessary to initialize the component):

        <script type="text/javascript">  
            $(document).ready(function () {  
                var workbook = new GC.Spread.Sheets.Workbook(document.getElementById("ss"));  
            });  
        </script>  
    </head>  
    <body>  
        <div id="ss" style="height:600px ; width :100%; "></div>  
    </body>

Excel 가져오기 코드 추가

We need to create an instance of the client-side ExcelIO component that we can use to open the file:

    var excelIO = new GC.Spread.Excel.IO();

Then we need to add a function to import a file. In this example, we import a local file, but you can do the same thing with a file on a server. You need to reference the location if importing a file from a server. The following is an example of an input element where the user can enter the location of the file:

    <input type="text" id="importUrl" value="http://www.testwebsite.com/files/TestExcel.xlsx" style="width:300px" />

Once you have that, you can directly access that value in script code:

var excelUrl = $("#importUrl").val();

The following code for the import function uses a local file for the "excelUrl" variable:

    function ImportFile() {  
        var excelUrl = "./test.xlsx";  

        var oReq = new XMLHttpRequest();  
        oReq.open('get', excelUrl, true);  
        oReq.responseType = 'blob';  
        oReq.onload = function () {  
            var blob = oReq.response;  
            excelIO.open(blob, LoadSpread, function (message) {  
                console.log(message);  
            });  
        };  
        oReq.send(null);  
    }  
    function LoadSpread(json) {  
        jsonData = json;  
        workbook.fromJSON(json);  

        workbook.setActiveSheet("Revenues (Sales)");  
    }

Whether you're referencing a file on a server or locally, you'll need to add the following to your script inside the $(document).ready function:

 $(document).ready(function () {  
        $.support.cors = true;  
        workbook = new GC.Spread.Sheets.Workbook(document.getElementById("ss"));  
        //...  
    });

In this case, we need to enable Cross-Origin-Request-Support because we are potentially loading a file from a URL. Hence the $.support.cors = true; line, or else attempting to load it will result in a CORS error.

가져온 Excel 파일에 데이터 추가

We import a local file using the “Profit loss statement” Excel template for this tutorial.

이제 Spread.Sheets 스크립트를 사용하여 이 파일에 다른 수익 라인을 추가할 수 있습니다. 이 작업을 수행하는 버튼을 페이지에 추가해 보겠습니다.

    <button id="addRevenue">Add Revenue</button>

해당 버튼에 대한 클릭 이벤트 핸들러에 대한 함수를 작성하여 행을 추가하고 일부 데이터를 추가하기 위한 준비로 이전 행에서 스타일을 복사할 수 있습니다. 스타일을 복사하려면 copyTo 함수를 사용하고 다음을 전달해야 합니다.

출발지 및 도착지 행 및 열 인덱스

행 및 열 수

스타일에 대한 CopyToOptions 값

    document.getElementById("addRevenue").onclick = function () {  
        var sheet = workbook.getActiveSheet();  
        sheet.addRows(newRowIndex, 1);  
        sheet.copyTo(10, 1, newRowIndex, 1, 1, 29, GC.Spread.Sheets.CopyToOptions.style);  
    }

데이터 및 스파크라인을 추가하기 위한 다음 스크립트 코드는 이 버튼 클릭 이벤트 핸들러에 포함됩니다. 대부분의 데이터에 대해 setValue 함수를 사용할 수 있습니다. 이렇게 하면 행 인덱스, 열 인덱스 및 값을 전달하여 Spread의 시트에 값을 설정할 수 있습니다.

    sheet.setValue(newRowIndex, 1, "Revenue 8");  

    for (var c = 3; c < 15; c++) {  
        sheet.setValue(newRowIndex, c, Math.floor(Math.random() * 200) + 10);  
    }

다른 행과 일치하도록 열 P에 SUM 수식을 설정하고 열 Q에 대한 백분율을 설정합니다.

    sheet.setFormula(newRowIndex, 15, "=SUM([@[Jan]:[Dec]])")  
    sheet.setValue(newRowIndex, 16, 0.15);

마지막으로, 이번에는 CopyToOptions.formula를 사용하여 copyTo 함수를 다시 사용하여 열 R에서 AD까지의 이전 행에서 새 행으로 수식을 복사할 수 있습니다.

    sheet.copyTo(10, 17, newRowIndex, 17, 1, 13, GC.Spread.Sheets.CopyToOptions.formula);

스파크라인 추가

Now we can add a sparkline to match the other rows of data. To do this, we need to provide a range of cells to get the data from and some settings for the sparkline. In this case, we can specify:

the range of cells, we just added data to
settings to make the sparkline look like the other sparklines in the same column

    var data = new GC.Spread.Sheets.Range(11, 3, 1, 12);  
    var setting = new GC.Spread.Sheets.Sparklines.SparklineSetting();  
    setting.options.seriesColor = "Text 2";  
    setting.options.lineWeight = 1;  
    setting.options.showLow = true;  
    setting.options.showHigh = true;  
    setting.options.lowMarkerColor = "Text 2";  
    setting.options.highMarkerColor = "Text 1";

After that, we call the setSparkline method and specify:

a location for the sparkline
the location of the data
the orientation of the sparkline
the type of sparkline
the settings we created

    sheet.setSparkline(11, 2, data, GC.Spread.Sheets.Sparklines.DataOrientation.horizontal, GC.Spread.Sheets.Sparklines.SparklineType.line, setting);

If you were to try running the code now, it might seem a little slow because the workbook is repainting every time data is changed and styles are added. To drastically speed it up and increase performance, Spread.Sheets provide the ability to suspend painting and the calculation service. Let’s add the code to suspend both before adding a row and its data and then resume both after:

    workbook.suspendPaint();  
    workbook.suspendCalcService();  
    //...  
    workbook.resumeCalcService();  
    workbook.resumePaint();

Once we add that code, we can open the page in a web browser and see the Excel file load into Spread.Sheets with an added revenue row. Important: Keep in mind that Chrome doesn’t allow you to open local files for security purposes, so you need to use a web browser like Firefox to run this code successfully. Alternatively, loading a file from a website URL should open fine in any browser.

Excel 내보내기 코드 추가

Finally, we can add a button to export the file with the added row. To do this, we can use the client-side ExcelIO code built into Spread.Sheets:

    function ExportFile() {  
        var fileName = $("#exportFileName").val();  
        if (fileName.substr(-5, 5) !== '.xlsx') {  
            fileName += '.xlsx';  
        }  
        var json = JSON.stringify(workbook.toJSON());  

        excelIO.save(json, function (blob) {  
            saveAs(blob, fileName);  
        }, function (e) {  
            if (e.errorCode === 1) {  
                alert(e.errorMessage);  
            }  
        });  
    }

That code gets the export file name from an exportFileName input element. We can define it and let users name the file like so:

    <input type="text" id="exportFileName" placeholder="Export file name" value="export.xlsx" />

Then we can add a button that calls this function:

    <button id="export">Export File</button>  

    document.getElementById("export").onclick = function () {  
        ExportFile();  
    }

수익 행을 추가하면 파일 내보내기 버튼을 사용하여 파일을 내보낼 수 있습니다. 사용자가 원하는 위치에 파일을 저장할 수 있도록 FileSaver 외부 라이브러리를 추가해야 합니다.

    <script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2014-11-29/FileSaver.min.js"></script>

파일이 성공적으로 내보내지면 Excel에서 열 수 있고 우리가 추가한 추가 수익 라인이 있다는 점을 제외하면 파일을 가져올 때와 같은 모양을 볼 수 있습니다.

이는 SpreadJS JavaScript 스프레드시트를 사용하여 Excel 파일에 데이터를 추가한 다음 간단한 JavaScript 코드를 사용하여 Excel로 다시 내보내는 방법의 한 예일 뿐입니다.

.

다른 기사 시리즈에서는 다른 Javascript 프레임워크에서 Excel 스프레드시트를 가져오고 내보내는 방법을 보여줍니다.

React

Vue

Angular

Reference

이 문제에 관하여(JavaScript를 사용하여 Excel XLSX를 가져오고 내보내는 방법), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/grapecity/how-to-import-and-export-excel-xlsx-using-javascript-o3p

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)