Excel IO 케이스 공유의 순수한 프론트 엔드 JavaScript 구현

저자：Eve Cole 업데이트 시간：2025-08-02 03:16:01

이 회사는 최근에 국유 기업을위한 ** 통계 및 관리 시스템을 구축하려고합니다.

특정 요구 사항이 포함됩니다

• Excel 가져 오기 및 수출

• 가져온 데이터를 기반으로 보고서를 표시합니다

• 차트 표시 (막대 차트, 라인 차트, 파이 차트 포함) 및 애니메이션 효과 및 플랫 스타일도 필요합니다.

• Excel 내보내기 및 Excel 파일을 관리 할 수 있도록 고객을 제공합니다

• ...

요구 사항이 너무 많습니다!

이제 마침내 끝났으므로 경험을 분석했습니다.

----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

전체 프로젝트 아키텍처에서 가장 먼저해야 할 일은 Excel 가져 오기 문제를 해결하는 것입니다.

회사는 Excel IO를 수행하기위한 자체 프레임 워크가 없으므로 다른 채널만을 통과 할 수 있습니다.

글쎄, 나는 Github에서 오픈 소스 라이브러리 XLSX를 발견하여 NPM을 통해 설치했습니다.

npm xlsx -save 설치

그런 다음 HTML 파일에 JS 파일에 대한 참조를 추가하십시오.

Filereader 객체를 통해 이진 문자열로 메모리에 데이터를로드하십시오.

 target.addeventListener ( 'drop', function (e) {e.preventDefault (); handledRop (e.datatransfer.files [0]);}); handledRop = function () {var reader = new Filereader (); reader.onload = function (e) {var data = e.target.result; ... ...}; reader.readasbinarystring (f);}

그런 다음 우리가해야 할 일은 라이브러리를 사용하여 데이터 데이터에서 작동하는 것입니다.

객체 XLSX를 노출시키고 XLSX의 read () 메소드를 통해 데이터를 JSON 객체로 읽을 수 있습니다.

 var Workbook = xlsx.read (data, {type : 'binary'}); var sheetname = workbook.sheetnames [0]; var sheet = workbook.sheets [sheetname];

그런 다음 키 값 쌍을 사용하여 시트에서 데이터를 꺼내 테이블에 넣으십시오.

 var table = document.createelement ( 'table'); for (var row = 1;; row ++) {if (시트 [ 'a'+row] == null) {break; } var tr = document.createElement ( 'tr'); for (var col = 65; col <= 90; col ++) {var c = string.fromcharcode (col); // get 'a', 'b', 'c'... var key = '' + c + row; if (시트 [key] == null) {break; } var td = document.createElement ( 'td'); td.innerhtml = 시트 [키] [ 'w']; Tr.AppendChild (TD); } table.appendChild (tr);} document.querySelector ( '#target'). AppendChild (표);

다음은 전체 코드입니다.

index.html

 <! docType html> <html lang = "en"> <head> <meta charset = "utf-8"> <title> 문서 </title> <style> #target {height : 400px; 너비 : 700px; 배경색 : #f8f8f8; 마진 : 200px Auto; 오버플로 : 숨겨진; Border-Radius : 5px; Box-Shadow : 2PX 2PX 5PX #888; } .hover :: 이전 {content : '여기에서 Excel 파일을 끌어 올리십시오'; 너비 : 100%; 높이 : 100%; 디스플레이 : 블록; 텍스트 정렬 : 센터; 라인 높이 : 400px; 글꼴 크기 : 24px; Font-Family : 'Microsoft Yahei'; } #TARGET> 테이블 {높이 : 250px; 너비 : 400px; 국경 : 1px Solid #CCC; Border-Radius : 3px; 마진 : 75px 자동; } #TARGET> 테이블 TD {텍스트-정렬 : 센터; 테두리 : 1px 고체 #ccc; 왼쪽 경계 : 1px Solid #CCC; } #TARGET> TABLE TR : First-Child> TD {Border-Top : 0px Solid #CCC; } #TARGET> TABLE TR> TD : 1 차 자녀 {Border-Left : 0px Solid #CCC; } </style> </head> <body> <div id = "target"> </div> <script src = "./ node_modules/xlsx/dist/jszip.js"> </script> <script src = "./ node_modules/xlsx/dist/xlsx.js src = "index.js"> </script> </body> </html>

아래는 전체 JS 코드입니다

index.js

 window.adeventListener ( 'load', function () {var target = quoperselector ( '#target'); target.adeventListener ( 'drager', function () {this.classlist.remove ( 'hover'); grad.AdDeventListener ( 'dragOver', intubter '); target.addeventListener ( 'dragover', function (e) {this.classlist.remove ( 'hover'); e.preventDefault (); addeventListener (e) {e.preventDefault (); var handledRop = function (f) {var reader = new FilEReader (), name = f.name; reader.onload = function (e) {var data = e.target.result, workbook = xlsx.read (data, {type : 'binary'}), sheetname = workbook.sheetnames [0], sheet = workbook.sheets [sheetname], table = document.createelement ( 'table'); for (var row = 1;; row ++) {if (시트 [ 'a'+row] == null) {break; } var tr = document.createElement ( 'tr'); for (var col = 65; col <= 90; col ++) {var c = string.fromcharcode (col); // get 'a', 'b', 'c'... var key = '' + c + row; if (시트 [key] == null) {break; } var td = document.createElement ( 'td'); td.innerhtml = 시트 [키] [ 'w']; Tr.AppendChild (TD); } table.appendChild (Tr); } document.querySelector ( '#target'). AppendChild (표); }; reader.readasbinarystring (f);}

효과는 다음과 같습니다.

이것은 효과가있는 것 같지만 우리는 매우 빨리 포기했습니다.

단점이 너무 많습니다.

•이 라이브러리는 여전히 개발 단계에 있으며, 제기 된 문제에는 여전히 많은 버그가 있습니다. 최종 웹 사이트의 안정성을 보장 할 방법은 없습니다.

•이 라이브러리는 병합 된 셀에서 데이터를 가져올 방법이 없으며 'A', 'B', 'C'및 1, 2, 3 좌표에 따라 엄격한 방식으로 데이터를 쿼리 할 수 있으며 내부 셀을 비울 수 없어야합니다.

• 더 불편한 점은 행과 열의 카운트 속성이 없다는 것입니다.

• 이는 국유 기업의 경우 이루어지기 때문에 별이 많지 않은 도서관에 의존하는 것은 불가능하므로 위험을 줄이는 것도 웹 사이트의 보안을위한 것입니다.

• ...

그룹 토론 후, 우리는 Wijmo라는 다른 프론트 엔드 컨트롤을 사용하기로 결정했습니다.

먼저 웹 사이트에서 Wijmo 패키지를 다운로드하십시오. 이 컨트롤은 NPM 및 Bower 방법을 제공하지 않습니다.

그런 다음 필요한 패키지를 가져옵니다

 <script src = "./ wijmo/dist/controls/wijmo.min.js"> </script> <script src = "./ wijmo/dist/controls/wijmo.grid.min.js"> </script> <script src = "./ wijmo/dist/controls/wijmo.grid.detail.min.js"> </script> <script src = "./ wijmo/dist/controls/wijmo.xlsx.min.js"> </script>

또한 JSZIP 패키지도 있습니다.이 패키지는 JS를 사용하여 압축 패키지를 압축 해제하는 라이브러리입니다. (MS의 열린 XML 기술로 인해 XLSX 파일은 XML 파일로 압축 해제 될 수 있으며 App.XML에는 기본 데이터가 포함되어 있습니다).

파일 읽기 작동은 위와 동일합니다.

 var handledRop = function (file) {var reader, 통합 문서; if (file) {reader = new Filereader; reader.onload = function (e) {workbook = new wijmo.xlsx.workbook (), workbook.load (reader.result); }; reader.readasdataurl (파일); }}

통과하다

통합 문서 = 새로운 wijmo.xlsx.workbook ();

workbook.load (reader.result);

이 두 줄의 코드는 Excel 파일을 메모리의 통합 문서 개체에로드합니다.

통합 문서 개체를 인쇄하십시오

이 객체 인쇄이 개체에는 통합 문서에 시트 배열이 포함되어 있고 각 시트에는 행 배열이 포함되어 있으며 각 행에는 셀 어레이가 포함되어 있으며 각 셀의 vaule 속성은 셀의 값입니다.

이것은 단순히 너무 좋습니다

다음은 객체 배열에서 데이터를 얻기 위해 getCollectionView 함수를 구현합니다.

 var getCollectionView = function (Workbook) {var collectionView = []; if (Workbook) {var sheet = workbook.sheets [0], header = []; // 열 헤더 배열 (var i = 0, 길이 = 시트 .rows.length; i <length; i ++) {var row = sheet.rows [i], rowarray = {}; for (var j = 0, jlength = row.cells.length; j <jlength; j ++) {var cell = row.cells [j]; // 데이터의 첫 번째 행 인 경우 열 제목으로 표시되어 (i === 0) {header.push (cell.value); } else {// 다음 행 배열은 rowArray 객체의 속성으로 저장되며 속성 이름은 열의 제목입니다. RowArray [헤더 [j]] = cell.value; }} if (i! == 0) {CollectionView.push (RowArray); }}} return collectionView;}

그런 다음 데이터를 제시하기 위해 테이블을 사용해야합니다. 여기서는 Wijmo의 FlexGrid 테이블을 직접 사용합니다.

 griddiv = document.createElement ( 'div'); griddiv.classlist.add ( 'grid'); datagrid = new wijmo.grid.flexgrid (griddiv); // 컨테이너를 전달하여 Flexgrid 양식을 구성합니다. var collectionView = new wijmo.collections.collectionView (getCollectionView (Workbook)); Datagrid.ItemsSource = CollectionView;

자, 위의 단계 후에 테이블에 Excel 가져 오기가 구현되었습니다.

다음은 완전한 JS 코드입니다.

index.js

 (function () {var datagrid = null, griddiv = null, workbook = null; wind 문서. target.adeventListener ( 'dragover', function (e) {e.preventDefault (); this.classList.remove ( 'hover');}); AppendChild (GridDiv); wijmo.collection.collectionview (getCollectionView); var i = 0, 길이; i ++) {var j = 0, jlength = row.length; header.push (셀.

다음은 효과가 있습니다

Excel 수출

이미 유로입니다

Excel 내보내기 기능을 구현하기위한 두 개의 코드 문장

wijmo.grid.xlsx.flexgridxlsxconverter.save (DataGrid,

{IncludeColumnheaders : true}, filename);

이 테이블은 필터링, 그룹화, 필터링, 편집도 지원합니다.

영역 차트 및 막대 차트

Excel IO를 완료 한 직후이 컨트롤 패키지는 영역 차트, 막대 차트 및 기타 여러 유형의 그래픽을 만들 수 있음을 발견했습니다.

그래서 여기에서는 영역 차트와 막대 차트의 예를 보여 드리겠습니다.

먼저 가방을 가져 오십시오.

<스크립트 src = "./ wijmo/dist/controls/wijmo.chart.min.js"> </script>

그런 다음 다음 코드 후에는 다음 코드를 사용하여 페이지 차트를 페이지에 삽입 할 수 있습니다.

 차트 = new wijmo.chart.flexchart ( '#chart'); Chart.initialize ({itemssource : collectionView, bindingx : 'name', 옵션 : {groupWidth : 15}, 시리즈 : [{이름 : 'age', 'age'},]});

아래의 효과를 참조하십시오

그중에서도 막대 차트의 색상과 모양을 조정할 수 있습니다. 마우스가 요소로 이동하면 작은 프롬프트가 있습니다.

여기에서 차트 유형을 변경하면 다른 유형의 차트로 전환 할 수 있습니다.

 Chart.ChartType = Chart.ChartType === wijmo.chart.charttype.column? wijmo.chart.charttype.area : wijmo.chart.charttype.column;

이 기사에 대한 코드는 http://xiazai.vevb.com/201608/yuanma/js-xlswijmo-io(Vevb.com).rar로 업로드되었습니다

나중에 Github에 호스팅됩니다.

결국 작업은 비교적 빠르게 완료되었습니다.

이것은이 프로젝트의 Excel IO에 대한 간단한 소개입니다. 이 프로젝트는 현재 완료되었으며 다른 기술 세부 사항은 향후 공유 될 것입니다.

그것이 당신을 도울 수 있기를 바랍니다.

위는이 기사의 모든 내용입니다. 모든 사람의 학습에 도움이되기를 바랍니다. 모든 사람이 wulin.com을 더 지원하기를 바랍니다.