요소 UI에서 Excel을 내보내는 방법

이번에는 요소 UI에서 Excel을 내보내는 방법과 요소 UI에서 Excel을 내보낼 때 주의 사항에 대해 설명하겠습니다.

1. 관련 종속성을 설치합니다

주로 두 가지 종속성

npm install --save xlsx file-saver

두 플러그인의 사용법을 자세히 보고 싶으시면 github를 방문해 주세요.

https://github.com/SheetJS/js-xlsx

https://github.com/eligrey/FileSaver.js

2. 구성요소에

import FileSaver from 'file-saver'
import XLSX from 'xlsx'

를 도입합니다. 3. 컴포넌트 메서드에 메서드를 작성하세요

exportExcel () {
 /* generate workbook object from table */
 var wb = XLSX.utils.table_to_book(document.querySelector('#out-table'))
 /* get binary string as output */
 var wbout = XLSX.write(wb, { bookType: 'xlsx', bookSST: true, type: 'array' })
 try {
  FileSaver.saveAs(new Blob([wbout], { type: 'application/octet-stream' }), 'sheetjs.xlsx')
 } catch (e) { if (typeof console !== 'undefined') console.log(e, wbout) }
 return wbout
},

참고: XLSX.uitls.table_to_book(테이블의 DOM 노드가 삽입됨), sheetjs.xlsx는 내보낸 table의 이름이며 수정할 수 있습니다!

4. 내보내기 버튼 을 클릭하여 내보내기Excel 메서드를 실행합니다.

이 기사의 사례를 읽은 후 방법을 마스터했다고 믿습니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

추천 도서:

vue-dplayer hls 재생을 구현하는 자세한 단계

vue 슬롯이 하위 구성 요소에 상위 구성 요소 전달을 표시하는 방법

위 내용은 요소 UI에서 Excel을 내보내는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!