【前端】批量导入和导出Excel数据

您所在的位置：网站首页 › 前端批量打印插件有哪些 › 【前端】批量导入和导出Excel数据

【前端】批量导入和导出Excel数据

2024-07-14 17:25| 来源: 网络整理| 查看: 265

1.准备

excel导入功能需要使用npm包xlsx，所以需要安装xlsx插件,读取和写入都依赖她

$ npm i [email protected]

vue-element-admin模板提供了一个导入excel数据的文件，我们只需用即可

代码地址：https://github.com/PanJiaChen/vue-element-admin/blob/master/src/components/UploadExcel/index.vue

将vue-element-admin提供的导入功能新建一个组件，位置：src/components/UploadExcel/index.vue

将文件拖到此处点击上传文件 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) }, handleDrop(e) { e.stopPropagation() e.preventDefault() if (this.loading) return const files = e.dataTransfer.files if (files.length !== 1) { this.$message.error('Only support uploading one file!') return } const rawFile = files[0] // only use files[0] if (!this.isExcel(rawFile)) { this.$message.error('Only supports upload .xlsx, .xls, .csv suffix files') return false } this.upload(rawFile) e.stopPropagation() e.preventDefault() }, handleDragover(e) { e.stopPropagation() e.preventDefault() e.dataTransfer.dropEffect = 'copy' }, 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

【本文地址】

【前端】批量导入和导出Excel数据

【前端】批量导入和导出Excel数据

今日新闻

推荐新闻