엑셀 다운로드 기능 구현
패키지설치
https://www.npmjs.com/package/xlsx
xlsx
SheetJS Spreadsheet data parser and writer. Latest version: 0.18.5, last published: a year ago. Start using xlsx in your project by running `npm i xlsx`. There are 3740 other projects in the npm registry using xlsx.
www.npmjs.com
https://kkhcode.tistory.com/12
React 엑셀 다운로드
내가 자주 사용하는 엑셀 파일로 다운로드를 하기위해 XLSX와 FileSaver를 다운받아야한다. XLSX는 복잡한 스프레드시트에서 유용한 데이터를 추출하고 새 스프레드시트를 생성하기 위해 검증된 오
kkhcode.tistory.com
React에서 엑셀뷰어
https://www.npmjs.com/package/react-spreadsheet
react-spreadsheet
Simple, customizable yet performant spreadsheet for React. Latest version: 0.7.8, last published: 17 days ago. Start using react-spreadsheet in your project by running `npm i react-spreadsheet`. There are 4 other projects in the npm registry using react-sp
www.npmjs.com
2.엑셀뷰어 예제
https://www.grapecity.com/wijmo/demos/Excel/WorkbookViewer/react
Workbook Viewer | Excel | React Wijmo Demos
import 'bootstrap.css'; import '@grapecity/wijmo.styles/wijmo.css'; import './app.css'; // import * as React from 'react'; import * as ReactDOM from 'react-dom/client'; import * as wjcCore from '@grapecity/wijmo'; import * as wjcXlsx from '@grapecity/wijmo
www.grapecity.com
https://www.npmjs.com/package/@grapecity/wijmo
@grapecity/wijmo
UI library for pure JS, Angular, React, Vue and more.... Latest version: 5.20222.877, last published: 3 months ago. Start using @grapecity/wijmo in your project by running `npm i @grapecity/wijmo`. There are 204 other projects in the npm registry using @gr
www.npmjs.com
https://www.npmjs.com/package/@grapecity/wijmo.xlsx
@grapecity/wijmo.xlsx
UI library for pure JS, Angular, React, Vue and more.... Latest version: 5.20222.877, last published: 3 months ago. Start using @grapecity/wijmo.xlsx in your project by running `npm i @grapecity/wijmo.xlsx`. There are 6 other projects in the npm registry u
www.npmjs.com
npm i @grapecity/wijmo.styles
패키지 설치하기
https://www.npmjs.com/package/@grapecity/wijmo.styles
https://getbootstrap.com/docs/4.0/getting-started/download/
Download
Download Bootstrap to get the compiled CSS and JavaScript, source code, or include it with your favorite package managers like npm, RubyGems, and more.
getbootstrap.com
npm install bootstrap엑셀뷰어 예제1
https://www.grapecity.com/wijmo/demos/Excel/WorkbookViewer/react
Workbook Viewer | Excel | React Wijmo Demos
import 'bootstrap.css'; import '@grapecity/wijmo.styles/wijmo.css'; import './app.css'; // import * as React from 'react'; import * as ReactDOM from 'react-dom/client'; import * as wjcCore from '@grapecity/wijmo'; import * as wjcXlsx from '@grapecity/wijmo
www.grapecity.com
엑셀뷰어 예제2
https://codesandbox.io/examples/package/react-excel-renderer
react-excel-renderer examples - CodeSandbox
codesandbox.io
엑셀뷰어 구현하기에서 발생한 문제점들
Module not found: Error: Can't resolve './App.css' in '/Users/marshall-kim/Documents/React/taijiyuankrtwo/reactexample/src/Pages'
매번 에러가 발생할때마다 구글링하여 문제점을 하나하나 해결해나갔다.
1.bootstrap.css 존재하지 않는다는 에러가 발생하기에 https://getbootstrap.com/docs/4.0/getting-started/download/
사이트에 들어가서 Compiled CSS and JS를 다운로드하고 그 폴더안에 bootstrap.css 파일을 copy하여 갖다 붙혔다.
2.문제점
Failed to build project with JSZip library
이런 에러가 뜨기에 https://github.com/angular/angular-cli/issues/10625#issuecomment-390878516%E2%80%8B
Failed to build project with JSZip library · Issue #10625 · angular/angular-cli
Versions Angular CLI: 6.0.0 Node: 8.11.1 OS: win32 x64 Angular: 6.0.0 ... animations, cli, common, compiler, compiler-cli, core, forms ... http, language-service, platform-browser ... platform-brow...
github.com
이 사이트에 들어가서 아래의 패키지를 캡처하여 install 실행함
- npm i --save jszip
3. 시스템의 요구에 의하여 Bootstrap version4.0 을 Bootstrap version 3.0으로 낮추어 다운받아 설치했다.
npm install bootstrapnpm install --save react-bootstrap bootstrap@3
코딩애플 블로그에 들어가서 벤치마킹하기도 하고 https://codingapple.com/forums/topic/failed-to-compile-오류가-해결이-되지-않습니다/
4. 컴포넌트 상단에 필요한 패키지즐을 찾아서 설치하였다
npm i @grapecity/wijmo.xlsx
React file viewer
https://github.com/plangrid/react-file-viewer/blob/master/src/components/drivers/xlsx-viewer.jsx
GitHub - plangrid/react-file-viewer
Contribute to plangrid/react-file-viewer development by creating an account on GitHub.
github.com
'React' 카테고리의 다른 글
| CSS Grid Layout example (2) | 2023.04.15 |
|---|---|
| Menus CSS (0) | 2023.04.01 |
| React Hooks useState, useEffect, useContext, useRef, useReducer, useCallback, useMemo, use (0) | 2023.03.18 |
| React 로그인 페이지 구현하기 (0) | 2023.03.11 |
| React url 링크를 클릭시 새 탭으로 페이지 띄우는 방법 (0) | 2023.03.01 |