Commit 175b92f

author

高晨辉

committed

export and upload excel

1 parent b4bf403 commit 175b92fCopy full SHA for 175b92f

File tree

8 files changed

+542

-8

lines changed

package-lock.json
package.json
src
- components/UploadExcel
  - index.vue
- style
  - index.scss
  - variable.scss
- vendor
  - Export2Excel.js
- views/excel-operate
  - excel-in.vue
  - excel-out.vue

8 files changed

+542

-8

lines changed

`‎package-lock.json`

Lines changed: 110 additions & 2 deletions

Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

`‎package.json`

Lines changed: 4 additions & 1 deletion

Original file line number	Diff line number	Diff line change
`@@ -14,11 +14,13 @@`
`14`	`14`	`"driver.js": "^0.9.7",`
`15`	`15`	`"echarts": "^4.2.1",`
`16`	`16`	`"element-ui": "^2.4.5",`
	`17`	`+ "file-saver": "^2.0.2",`
`17`	`18`	`"screenfull": "^4.2.0",`
`18`	`19`	`"vue": "^2.6.10",`
`19`	`20`	`"vue-count-to": "^1.0.13",`
`20`	`21`	`"vue-router": "^3.0.3",`
`21`		`- "vuex": "^3.0.1"`
	`22`	`+ "vuex": "^3.0.1",`
	`23`	`+ "xlsx": "^0.14.4"`
`22`	`24`	`},`
`23`	`25`	`"devDependencies": {`
`24`	`26`	`"@vue/cli-plugin-babel": "^3.8.0",`
`@@ -31,6 +33,7 @@`
`31`	`33`	`"eslint-plugin-vue": "^5.0.0",`
`32`	`34`	`"sass": "^1.18.0",`
`33`	`35`	`"sass-loader": "^7.1.0",`
	`36`	`+ "script-loader": "^0.7.2",`
`34`	`37`	`"vue-cli-plugin-element": "^1.0.1",`
`35`	`38`	`"vue-template-compiler": "^2.6.10"`
`36`	`39`	`}`

`‎src/components/UploadExcel/index.vue`

Lines changed: 82 additions & 0 deletions

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,82 @@`
	`1`	`+<template>`
	`2`	`+ <div>`
	`3`	`+ <input`
	`4`	`+ type="file"`
	`5`	`+ class="upFile"`
	`6`	`+ ref="fileExcel"`
	`7`	`+ accept=".xlsx, .xls"`
	`8`	`+ @change="uploadFile"`
	`9`	`+ />`
	`10`	`+ <el-button type="primary" @click="handleClick">导入</el-button>`
	`11`	`+ </div>`
	`12`	`+</template>`
	`13`	`+`
	`14`	`+<script>`
	`15`	`+import XLSX from 'xlsx'`
	`16`	`+export default {`
	`17`	`+ props: {`
	`18`	`+ breforeUpload: Function,`
	`19`	`+ onSuccess: Function`
	`20`	`+ },`
	`21`	`+ data() {`
	`22`	`+ return {`
	`23`	`+ excelList: {`
	`24`	`+ header: null,`
	`25`	`+ results: null`
	`26`	`+ }`
	`27`	`+ }`
	`28`	`+ },`
	`29`	`+ methods: {`
	`30`	`+ handleClick() {`
	`31`	`+ this.$refs.fileExcel.click()`
	`32`	`+ },`
	`33`	`+ generateData({ header, results }) {`
	`34`	`+ this.excelList.header = header`
	`35`	`+ this.excelList.results = results`
	`36`	`+ this.onSuccess && this.onSuccess(this.excelList)`
	`37`	`+ },`
	`38`	`+ uploadFile(e) {`
	`39`	`+ const file = e.target.files[0]`
	`40`	`+ this.$refs.fileExcel.value = null`
	`41`	`+ this.readData(file)`
	`42`	`+ },`
	`43`	`+ readData(file) {`
	`44`	`+ return new Promise(resolve => {`
	`45`	`+ const readfile = new FileReader()`
	`46`	`+ readfile.onload = e => {`
	`47`	`+ const data = e.target.result`
	`48`	`+ const workbook = XLSX.read(data, { type: 'array' })`
	`49`	`+ const firstSheetName = workbook.SheetNames[0]`
	`50`	`+ const worksheet = workbook.Sheets[firstSheetName]`
	`51`	`+ const header = this.getHeaderRow(worksheet)`
	`52`	`+ const results = XLSX.utils.sheet_to_json(worksheet)`
	`53`	`+ this.generateData({ header, results })`
	`54`	`+ resolve()`
	`55`	`+ }`
	`56`	`+ readfile.readAsArrayBuffer(file)`
	`57`	`+ })`
	`58`	`+ },`
	`59`	`+ getHeaderRow(sheet) {`
	`60`	`+ const headers = []`
	`61`	`+ const range = XLSX.utils.decode_range(sheet['!ref'])`
	`62`	`+ let C`
	`63`	`+ const R = range.s.r`
	`64`	`+ /* start in the first row */`
	`65`	`+ for (C = range.s.c; C <= range.e.c; ++C) {`
	`66`	`+ /* walk every column in the range */`
	`67`	`+ const cell = sheet[XLSX.utils.encode_cell({ c: C, r: R })]`
	`68`	`+ /* find the cell in the first row */`
	`69`	`+ let hdr = 'UNKNOWN ' + C // <-- replace with your desired default`
	`70`	`+ if (cell && cell.t) hdr = XLSX.utils.format_cell(cell)`
	`71`	`+ headers.push(hdr)`
	`72`	`+ }`
	`73`	`+ return headers`
	`74`	`+ }`
	`75`	`+ }`
	`76`	`+}`
	`77`	`+</script>`
	`78`	`+<style lang="scss" scoped>`
	`79`	`+.upFile {`
	`80`	`+ display: none;`
	`81`	`+}`
	`82`	`+</style>`

`‎src/style/index.scss`

Lines changed: 10 additions & 1 deletion

Original file line number	Diff line number	Diff line change
`@@ -69,7 +69,16 @@ body {`
`69`	`69`	`height: 100%;`
`70`	`70`	`}`
`71`	`71`	`.mtop30 {`
`72`		`- margin-top: $top30;`
	`72`	`+ margin-top: $px30;`
	`73`	`+}`
	`74`	`+.mtrt20 {`
	`75`	`+ margin-right: $px20;`
	`76`	`+}`
	`77`	`+.wid300 {`
	`78`	`+ width: 300px !important;`
	`79`	`+}`
	`80`	`+.btnStyle1 {`
	`81`	`+ padding: 11px 20px !important;`
`73`	`82`	`}`
`74`	`83`	`.header i[class^='el-icon'] {`
`75`	`84`	`color: $text-color;`

`‎src/style/variable.scss`

Lines changed: 2 additions & 1 deletion

Original file line number	Diff line number	Diff line change
`@@ -4,7 +4,8 @@ $text-color: #606266;`
`4`	`4`	`$white: #ffffff;`
`5`	`5`
`6`	`6`	`$sideBarWidth: 200px;`
`7`		`-$top30: 30px;`
	`7`	`+$px30: 30px;`
	`8`	`+$px20: 20px;`
`8`	`9`
`9`	`10`	`%width-height {`
`10`	`11`	`width: 100%;`

0 commit comments

Comments

(0)

Navigation Menu

Search code, repositories, users, issues, pull requests...

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Commit 175b92f

File tree

8 files changed

8 files changed

`‎package-lock.json`

`‎package.json`

`‎src/components/UploadExcel/index.vue`

`‎src/style/index.scss`

`‎src/style/variable.scss`

0 commit comments