(ActiveXObject 없이) JavaScript로 Excel 파일을 읽는 방법

(ActiveXObject 없이) JavaScript로 Excel 파일을 읽는 방법

친구가 엑셀 파일에서 차트(막대, 곡선)를 생성하는 간단한 어플리케이션을 만들어 달라고 부탁했습니다.저는 이미 강력한 chart.js를 알고 있기 때문에 자바스크립트를 언어로 사용하기로 했습니다.하지만 chart.js를 사용하기 전에 엑셀 파일에서 데이터를 수집해야 합니다.그렇다면 자바스크립트를 통해 엑셀 파일을 읽는 방법은?

몇 가지 조사 끝에 (ActiveX를 사용하여) Internet Explorer로 이 작업을 수행했지만 브라우저 간에 작동하려면 이 작업이 필요합니다.

순수 자바스크립트로 XLS & XLSX를 파싱할 수 있는 자바스크립트 라이브러리가 있습니다.Chrome으로 테스트를 해봤는데(Windows상에서도) 정상적으로 작동했습니다.

이 문제에 대한 또 다른 관점이 있는데, 자바스크립트로 엑셀 파일을 읽는 대신 펀펀 엑셀 애드인의 도움으로 엑셀에서 자바스크립트를 직접 사용할 수 있었습니다.기본적으로 펀펀은 Excel에서 자바스크립트를 사용할 수 있게 해주는 도구이므로, Chart.js와 같은 라이브러리를 사용하여 스프레드시트의 데이터로부터 차트를 플롯할 수 있습니다.

기본적으로, 당신이 해야 할 일은

1). Office Add-in 스토어에서 Funfun Add-in을 삽입합니다.

2). 새로운 펀펀을 만들거나 펀펀 온라인 편집기에서 샘플을 로드합니다.

3). 다른 자바스크립트 편집기에서처럼 자바스크립트 코드를 작성합니다.이 단계에서 스프레드시트의 데이터를 직접 사용하기 위해서는 일부 JSON I/O를 작성하여 Excel 셀을 참조해야 합니다.이 값이 Setting-short에 있는 위치입니다. 하지만 이 값은 몇 줄에 불과합니다.예를 들어, 스프레드시트에 아래와 같은 데이터가 있다고 가정해 보겠습니다.평균 시간은 셀 A1에 있습니다.

Average hours    Jan    Feb   Mar    Apr
Baby Jones       93.5   81    94.5   95.5
Joanne Jones     91.5   90    88.5   85.5

이 경우 JSON I/O 값은 다음과 같습니다.

{
    "months": "=C6:G6",
    "manager1": "=C7:G7",
    "manager2": "=C8:G8"
}

자세한 설명은 펀펀(Funfun) 설명서를 확인할 수 있습니다.

4). 코드를 실행하여 도표를 표시합니다.

펀펀 온라인 에디터에서 자바스크립트(Chart.js)와 엑셀 데이터를 이용하여 만든 샘플 차트입니다.아래 링크에서 확인하실 수 있습니다.2단계에서 설명한 것처럼 엑셀에 쉽게 로드할 수도 있습니다.

https://www.funfun.io/1/edit/5a365e7c74efa7334ff272a6

공개:저는 펀펀의 개발자입니다.

Excel 파일에서 데이터를 쉽게 로드할 수 있는 Chart.js 플러그인 chartjs-plugin-data source가 있습니다.

아래와 같이 엑셀 파일이 있다고 가정해보자 다음과 같이 저장됩니다.mydata.xlsxHTML 파일과 동일한 디렉토리에 있습니다.

+---------------+---------+----------+-------+-------+------+------+------+
|               | January | February | March | April | May  | June | July |
+---------------+---------+----------+-------+-------+------+------+------+
| Temperature   |       7 |        7 |    10 |    15 |   20 |   23 |   26 |
+---------------+---------+----------+-------+-------+------+------+------+
| Precipitation |     8.1 |     14.9 |  41.0 |  31.4 | 42.6 | 57.5 | 36.0 |
+---------------+---------+----------+-------+-------+------+------+------+

Chart.js, SheetJS(js-xlsx) 및 chartjs-plugin-datasource를 페이지에 포함합니다.

<script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script>
<script src="https://cdn.jsdelivr.net/npm/xlsx@0.14.3/dist/xlsx.full.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datasource@0.1.0"> </script>

<canvas id="myChart"></canvas>

그런 다음 지정합니다.mydata.xlsx당신의 대본에.

var ctx = document.getElementsById("myChart");
var chart = new Chart(ctx, {
    type: 'bar',
    data: {
        datasets: [{
            type: 'line',
            yAxisID: 'temperature',
            backgroundColor: 'transparent',
            borderColor: 'rgb(255, 99, 132)',
            pointBackgroundColor: 'rgb(255, 99, 132)',
            tension: 0,
            fill: false
        }, {
            yAxisID: 'precipitation',
            backgroundColor: 'rgba(54, 162, 235, 0.5)',
            borderColor: 'transparent'
        }]
    },
    plugins: [ChartDataSource],
    options: {
        scales: {
            yAxes: [{
                id: 'temperature',
                gridLines: {
                    drawOnChartArea: false
                }
            }, {
                id: 'precipitation',
                position: 'right',
                gridLines: {
                    drawOnChartArea: false
                }
            }]
        },
        plugins: {
            datasource: {
                url: 'mydata.xlsx'
            }
        }
    }
});

ActiveX를 사용하지 않으면 엑셀 파일을 읽을 수 없을 것 같습니다.ActiveX 없이는 엑셀파일을 읽을 수 없다는 것은 아니지만, 그 방법은 잘 모릅니다. Active를 사용해서 읽고 싶다면 엑셀파일을 읽을 때 사용할 수 있는 코드가 여기 있습니다.

<input type="button" id="btnSubmit" onclick="readdata(1, 2)" value="Submit" />
<script>
var xVal = 1;
var yVal = 2

    function readdata(x,y) {
        x = xVal;
        y = yVal;
        try {
            var excel = new ActiveXObject("Excel.Application");
            excel.Visible = false;
            var excel_file = excel.Workbooks.Open("D:\\Test.xls");// alert(excel_file.worksheets.count);
            var excel_sheet = excel_file.Worksheets("Sheet1");

            for(i=0;i<5;i++)
            {
               var data = excel_sheet.Cells(i,2).Value;
                drawWithexcelValue(data);
            }


        }
        catch (ex) {
            alert(ex);
        }

</script>

IE 9 이상에서만 실행되며 설정에서 activeX 기능을 활성화해야 합니다.

언급URL : https://stackoverflow.com/questions/16630413/how-can-i-read-an-excel-file-with-javascript-without-activexobject