系列文章目錄
Vue基礎篇一:編寫第一個Vue程式
Vue基礎篇二:Vue元件的核心概念
Vue基礎篇三:Vue的計算屬性與偵聽器
Vue基礎篇四:Vue的生命周期(秒殺案例實戰)
Vue基礎篇五:Vue的指令
Vue基礎篇六:Vue使用JSX進行動态渲染
Vue提高篇一:使用Vuex進行狀态管理
Vue提高篇二:使用vue-router實作靜态路由
Vue提高篇三:使用vue-router實作動态路由
Vue提高篇四:使用Element UI元件庫
Vue提高篇五:使用Jest進行單元測試
Vue提高篇六: 使用Vetur+ESLint+Prettier插件提升開發效率
Vue實戰篇一: 使用Vue搭建注冊登入界面
Vue實戰篇二: 實作郵件驗證碼發送
Vue實戰篇三:實作使用者注冊
Vue實戰篇四:建立多步驟表單
Vue實戰篇五:實作檔案上傳
Vue實戰篇六:表格渲染動态資料
Vue實戰篇七:表單校驗
Vue實戰篇八:實作彈出對話框進行互動
Vue實戰篇九:使用省市區級聯選擇插件
Vue實戰篇十:響應式布局
Vue實戰篇十一:父元件擷取子元件資料的正常方法
Vue實戰篇十二:多項選擇器的實際運用
Vue實戰篇十三:實戰分頁元件
Vue實戰篇十四:前端excel元件實作資料導入
文章目錄
- 系列文章目錄
- 一、背景
- 二、用法
- 2.1 使用VUE-CLI腳手架建立架構;
- 2.2 安裝SheetJS js-xlsx 元件
- 2.3 編寫Excel上傳元件
- 三、實戰
- 3.1 Mock Excel模闆與資料
- 3.2 導入資料
一、背景
- 前端在處理大批量資料時,有時候需要通過excel檔案實作資料的導入:
- 前端界面選擇需要導入的excel檔案,将excel中的資料清單展示在頁面上;
- 導入的資料通過後端接口上傳至資料庫進行儲存。
- 本文将通過SheetJS js-xlsx 元件實作前端的資料導入。
二、用法
2.1 使用VUE-CLI腳手架建立架構;
2.2 安裝SheetJS js-xlsx 元件
> npm install
2.3 編寫Excel上傳元件
<template>
<div>
<input ref="excel-upload-input" class="excel-upload-input" type="file" accept=".xlsx, .xls" @change="handleClick">
<el-button :loading="loading"style="margin-left:5px;" size="large" type="primary" @click="handleUpload">
打開excel檔案
</el-button>
</div>
</template>
<script>import XLSX from 'xlsx'
export default {
props: {
beforeUpload: Function, // eslint-disable-line
onSuccess: Function// eslint-disable-line
},
data() {
return {
loading: false,
excelData: {
header: null,
results: null
}
}
},
methods: {
generateData({ header, results }) {
this.excelData.header = header
this.excelData.results = results
this.onSuccess && this.onSuccess(this.excelData)
},
handleUpload() {
this.$refs['excel-upload-input'].click()
},
handleClick(e) {
const files = e.target.files
const rawFile = files[0] // only use files[0]
if (!rawFile) return
this.upload(rawFile)
},
upload(rawFile) {
this.$refs['excel-upload-input'].value = null // fix can't select the same excel
if (!this.beforeUpload) {
this.readerData(rawFile)
return
}
const before = this.beforeUpload(rawFile)
if (before) {
this.readerData(rawFile)
}
},
readerData(rawFile) {
this.loading = true
return new Promise((resolve, reject) => {
const reader = new FileReader()
reader.onload = e => {
const data = e.target.result
const workbook = XLSX.read(data, { type: 'array' })
const firstSheetName = workbook.SheetNames[0]
const worksheet = workbook.Sheets[firstSheetName]
const header = this.getHeaderRow(worksheet)
const results = XLSX.utils.sheet_to_json(worksheet)
this.generateData({ header, results })
this.loading = false
resolve()
}
reader.readAsArrayBuffer(rawFile)
})
},
getHeaderRow(sheet) {
const headers = []
const range = XLSX.utils.decode_range(sheet['!ref'])
let C
const R = range.s.r
/* start in the first row */
for (C = range.s.c; C <= range.e.c; ++C) { /* walk every column in the range */
const cell = sheet[XLSX.utils.encode_cell({ c: C, r: R })]
/* find the cell in the first row */
let hdr = 'UNKNOWN ' + C // <-- replace with your desired default
if (cell && cell.t) hdr = XLSX.utils.format_cell(cell)
headers.push(hdr)
}
return headers
},
isExcel(file) {
return /\.(xlsx|xls|csv)$/.test(file.name)
}
}
}</script>
<style scoped>.excel-upload-input{
display: none;
z-index: -9999;
}</style>