순수 전단 자 바스 크 립 트 를 사용 하여 엑셀 가 져 오기 내 보 내기 방법 에 대한 상세 한 설명

14614 단어 JavaScriptExcel가 져 오기도 출
회 사 는 최근 에 모 국영 기업 을 위해**통계 와 관리 시스템 을 만들어 야 한다.
구체 적 요구 포함
Excel 가 져 오기 내 보 내기 가 져 온 데이터 에 따라 보고서 도표 전시(막대 그래프,접 는 그림,떡 그림 포함)를 하고 애니메이션 효과,평면 화 된 스타일 Excel 내 보 내기,클 라 이언 트 를 제공 하여 Excel 파일 을 관리 해 야 합 니 다.
요구 가 정말 많다!
이제 야 완성 되 었 기 때문에 나의 경험 을 분석 해 냈 다.
전체 프로젝트 구조 에서 먼저 엑셀 가 져 온 문 제 를 해결 해 야 한다.
회 사 는 엑셀 IO 를 만 드 는 자신의 틀 이 없 기 때문에 다른 경 로 를 통과 할 수 밖 에 없다.
네,github 에서 오픈 소스 라 이브 러 리xlsx를 찾 았 습 니 다.npm 방식 으로 설치 되 었 습 니 다.

npm install xlsx --save
이후 자신의 html 파일 에 js 파일 에 대한 인용 을 추가 합 니 다.

<script src="./node_modules/xlsx/dist/jszip.js"></script>
<script src="./node_modules/xlsx/dist/xlsx.js"></script>
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);
}
그리고 우리 가 내 려 온 조작 은 라 이브 러 리 를 이용 하여 data 데 이 터 를 조작 하 는 것 이다.
대상 XLSX 가 노출 되 어 XLSX 의 read()방법 으로 데 이 터 를 JSON 대상 으로 읽 을 수 있 습 니 다.

var workbook = XLSX.read(data, { type: 'binary' });
var sheetName = workbook.SheetNames[0];
var sheet = workbook.Sheets[sheetName];
이후 키 값 이 맞 는 방식 으로 데 이 터 를 sheet 에서 꺼 내 표 에 넣 습 니 다.

var table = document.createElement('table');
for (var row = 1; ; row++) {
  if (sheet['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 (sheet[key] == null) {
      break;
    }
    var td = document.createElement('td');
    td.innerHTML = sheet[key]['w'];
    tr.appendChild(td);
  }
  table.appendChild(tr);
}
document.querySelector('#target').appendChild(table);
다음은 전체 코드 입 니 다.
index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    #target {
      height: 400px;
      width: 700px;
      background-color: #f8f8f8;
      margin: 200px auto;
      overflow:hidden;
      border-radius:5px;
      box-shadow:2px 2px 5px #888;
    }  
    .hover::before {
      content: '  excel      ';
      width: 100%;
      height: 100%;
      display: block;
      text-align: center;
      line-height: 400px;
      font-size: 24px;
      font-family: '    ';
    }
    #target>table{
      height:250px;
      width:400px;
      border:1px solid #ccc;
      border-radius:3px;
      margin:75px auto;
    }
    #target>table td{
      text-align:center;
      border-top:1px solid #ccc;
      border-left:1px solid #ccc;
    }
     #target>table tr:first-child>td{
       border-top:0px solid #ccc;
     }
     #target>table tr>td:first-child{
       border-left:0px solid #ccc;
     }
  </style>
</head>
<body>
  <div id="target" class="hover">
  </div>
 
  <script src="./node_modules/xlsx/dist/jszip.js"></script>
  <script src="./node_modules/xlsx/dist/xlsx.js"></script>
  <script src="index.js"></script>
</body>
</html>
다음은 전체 js 코드 입 니 다.
index.js

window.addEventListener('load', function () {
  var target = document.querySelector('#target');
  target.addEventListener('dragenter', function () {
    this.classList.remove('hover');
  });
  target.addEventListener('dragleave', function () {
    this.classList.add('hover');
  });
  target.addEventListener('dragover', function (e) {
    this.classList.remove('hover');
    e.preventDefault();
  });

  target.addEventListener('drop', function (e) {
    e.preventDefault();
    handleDrop(e.dataTransfer.files[0]);
  });

});
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 (sheet['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 (sheet[key] == null) {
          break;
        }
        var td = document.createElement('td');
        td.innerHTML = sheet[key]['w'];
        tr.appendChild(td);
      }
      table.appendChild(tr);
    }
    document.querySelector('#target').appendChild(table);
  };
  reader.readAsBinaryString(f);
}
효 과 는 다음 과 같 습 니 다:

이렇게 하면 될 것 같 지만,우 리 는 곧 포기 했다.
폐단 이 너무 많다.
이 라 이브 러 리 는 현재 개발 단계 에 있 으 며,issues 에는 버그 가 많이 제기 되 고 있다.이것 은 최종 사이트 의 안정성 을 보장 할 방법 이 없다.이 라 이브 러 리 는 합 쳐 진 셀 의 데 이 터 를 가 져 올 방법 이 없습니다.'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.grid.xlsx.min.js"></script>
<script src="./wijmo/dist/controls/wijmo.xlsx.min.js"></script>
그 밖 에 jszip 가방 도 도입 되 었 는데 js 를 사용 하여 압축 가방 을 풀 수 있 는 라 이브 러 리 입 니 다.(MS 의 open xml 기술 로 인해 xlsx 파일 은 모두 xml 파일 로 압축 을 풀 수 있 고 app.xml 에는 주요 데이터 가 포함 되 어 있 습 니 다).

<script src="./jszip.min.js"></script>
파일 읽 기 동작 은 위 와 같 습 니 다.

var handleDrop = function (file) {
  var reader,
    workbook;
 
  if (file) {
    reader = new FileReader;
    reader.onload = function (e) {
      workbook = new wijmo.xlsx.Workbook(),
        workbook.load(reader.result);
    };
    reader.readAsDataURL(file);
  }
}
통과 하 다.

 workbook = new wijmo.xlsx.Workbook();
 workbook.load(reader.result);
이 두 줄 코드 는 메모리 에 있 는 워 크 북 대상 에 엑셀 파일 을 불 러 옵 니 다.
워 크 북 대상 인쇄,

이 대상 을 인쇄 하면 워 크 북 에는 sheets 배열 이 포함 되 어 있 습 니 다.각 sheet 에는 rows 배열 이 포함 되 어 있 습 니 다.각 row 에는 cells 배열 이 포함 되 어 있 습 니 다.각 cell 에는 vaule 속성 이 셀 의 값 입 니 다.
이것 은 정말 너무 좋다.
다음은 함수 getCollection View 를 실현 하여 대상 배열 의 방식 으로 데 이 터 를 가 져 옵 니 다.

var getCollectionView = function (workbook) {
  var collectionView = [];
  if (workbook) {
    var sheet = workbook.sheets[0],
      header = []; //      
   
    for (var i = 0, length = sheet.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];
        //         ，           ，        
        if (i === 0) {
          header.push(cell.value);
        }
        else {
          //       ，   rowArray       ，          。
          rowArray[header[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;
자,위의 몇 가지 절 차 를 거 쳐 엑셀 을 표 로 가 져 오 는 것 이 실현 되 었 습 니 다.
이것 은 완전한 js 코드 입 니 다:
index.js

(function () {
  var dataGrid = null,
    gridDiv = null,
    workbook = null;
  window.addEventListener('load', function () {
    gridDiv = document.createElement('div');
    gridDiv.classList.add('grid');
    dataGrid = new wijmo.grid.FlexGrid(gridDiv);
    var target = document.querySelector('#target');

    target.addEventListener('dragenter', function (e) {
      e.preventDefault();
      this.classList.remove('hover');

    });
    target.addEventListener('dragleave', function (e) {
      e.preventDefault();
      this.classList.add('hover');
    });
    target.addEventListener('dragover', function (e) {
      e.preventDefault();
      this.classList.remove('hover');
    });

    target.addEventListener('drop', function (e) {
      e.preventDefault();
      handleDrop(e.dataTransfer.files[0]);
      //            
      this.appendChild(gridDiv);
    });
  });

  var handleDrop = function (file) {
    var reader;
    var workbook;
   
    if (file) {
      reader = new FileReader;
      reader.onload = function (e) {
        workbook = new wijmo.xlsx.Workbook();
        workbook.load(reader.result);
				var collectionView = new 		 wijmo.collections.CollectionView(getCollectionView(workbook));
				dataGrid.itemsSource = collectionView;
        // console.log(dataGrid.collectionView);
      };
      reader.readAsDataURL(file);
    }
  }

  var getCollectionView = function (workbook) {
    var collectionView = [];
   
    if (workbook) {
      var sheet = workbook.sheets[0];
      var title = [];
     
      for (var i = 0, length = sheet.rows.length; i < length; i++) {
        var row = sheet.rows[i];
        var rowArray = {};
       
        for (var j = 0, jLength = row.cells.length; j < jLength; j++) {
          var cell = row.cells[j];
          if (i === 0) {
            header.push(cell.value);
          }
          else {
            rowArray[header[j]] = cell.value;
          }
        }
        if (i !== 0) {
          collectionView.push(rowArray);
        }
      }
    }
    return collectionView;
  }
})(window);
다음은 효과.

Excel 내 보 내기
멍청 하 다
두 개의 코드 가 엑셀 내 보 내기 기능 을 실현 하 다.

wijmo.grid.xlsx.FlexGridXlsxConverter.save(dataGrid,
	{ includeColumnHeaders: true }, fileName);
이 표 는 필터,그룹,필터,편집 도 지원 합 니 다.
평면도 와 막대 그래프
엑셀 IO 를 완성 한 후에 이 컨트롤 백 은 면적 도,막대 그래프 와 다른 여러 유형의 도형 을 만 들 수 있다 는 것 을 발견 했다.
그래서 여기 서 면적 도와 기둥 모양 의 예 를 보 여 줍 니 다.
우선 가방 을 끌 어 들 여야 한다.

<script src="./wijmo/dist/controls/wijmo.chart.min.js"></script>
그리고 다음 코드 를 통 해 페이지 에 막대 그래프 를 삽입 할 수 있 습 니 다.

chart = new wijmo.chart.FlexChart('#chart');
chart.initialize({
  itemsSource: collectionView,
  bindingX: 'name',
  options: {
    groupWidth: 15
  },
  series: [
    { name: '  ', binding: 'age' },
  ]
});
효과

그 중에서 도 색상 과 막대 그래프 의 모양 을 조절 할 수 있 습 니 다.마우스 가 요소 로 이동 하면 팁 도 있 습 니 다.
여기 서 chart 의 유형 만 바 꾸 면 다른 유형의 도표 로 전환 할 수 있 습 니 다.

chart.chartType = chart.chartType === wijmo.chart.ChartType.Column ?
  wijmo.chart.ChartType.Area :
  wijmo.chart.ChartType.Column;

이 편 에 대한 코드 가 업로드 되 었 습 니 다http://xiazai.jb51.net/202008/yuanma/xlsWijmo_jb51.rar.
추 후 github 에 맡 길 겁 니 다.
결국 비교적 빨리 임 무 를 완수 했다.
이 프로젝트 에 관 한 Excel IO 는 여기까지 간단하게 소 개 했 습 니 다.이 프로젝트 는 현재 완성 되 었 고 나중에 다른 기술 세부 사항 을 공유 할 것 입 니 다.
당신 에 게 도움 을 줄 수 있 기 를 바 랍 니 다.
순수 전단 자 바스 크 립 트 를 사용 하여 엑셀 가 져 오기 내 보 내기 방법 을 실현 하 는 과정 에 대한 상세 한 설명 은 여기까지 입 니 다.더 많은 자 바스 크 립 트 가 엑셀 가 져 오기 내 보 내기 내용 을 실현 하 는 것 에 대해 서 는 예전 의 글 을 검색 하거나 아래 의 관련 글 을 계속 찾 아 보 세 요.앞으로 많은 지원 바 랍 니 다!
vue 의 생명 주 기 는 모두 몇 단계 입 니까?각각 무엇 입 니까?
vue 에 있 는$이벤트 이해 와 프레임 워 크 에 기본 값 외 전 참 을 포함 합 니 다.

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage