element 导入excel

导入依赖

npm install -S file-saver xlsx
npm install -D script-loader

html页面：

<input
ref="excel-upload-input"
class="excel-upload-input"
type="file"
accept=".xlsx, .xls"
@change="handleClick"
/>
<div
class="drop"
@drop="handleDrop"
@dragover="handleDragover"
@dragenter="handleDragover"
>
<el-button
:loading="loading"
class="eidt"
size="mini"
type="primary"
@click="handleUpload">导入</el-button>
</div>

<el-table
id="tableId"
:data="tableData"
border
highlight-current-row
style="width: 100%; margin-top: 20px"
>
<el-table-column
v-for="item of tableHeader"
:key="item"
:prop="item"
:label="item"
/>
</el-table>

script代码：

<script>

import * as XLSX from "xlsx";

export default {

.......

methods:{

// 点击导入

handleDrop(e) {

e.stopPropagation();

e.preventDefault();

if (this.loading) return;

const files = e.dataTransfer.files;

if (files.length !== 1) {

this.$message.error("仅支持单个上传一个文件");

return;

}

const rawFile = files[0]; // 获取文件信息

if (!this.isExcel(rawFile)) {

//是不是excel文件

this.$message.error(

"仅支持 .xlsx, .xls, .csv 文件格式上传"

);

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) {

// console.log(e);

const files = e.target.files;

const rawFile = files[0]; // only use files[0]

if (!rawFile){

this.$notify.error({

title: '错误',

message: '无法读取该文件',

duration: 1000

});

return

}else if(!this.isExcel(rawFile)){

this.$notify.error({

title: '错误',

message: "仅支持 .xlsx, .xls, .csv 文件格式上传",

duration: 1000

});

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); //把excel转化成数组

}

},

beforeUpload(file) {

const isLt1M = file.size / 1024 / 1024 < 1;

if (isLt1M) {

return true;

}

this.$message({

message: "请不要上传大于1M的文件",

type: "warning",

});

return false;

},

readerData(rawFile) {

this.loading = true;

return new Promise((resolve, reject) => {

const reader = new FileReader();

reader.readAsArrayBuffer(rawFile);

//参数可以是 Blob 或者 File 对象异步结果将在onload 事件中体现

reader.onload = (e) => {

const data = e.target.result;

console.log(data);

const workbook = XLSX.read(data, { type: "array" });

console.log("workbook", workbook);

//看下图

const firstSheetName = workbook.SheetNames[0];

// console.log("firstSheetName",firstSheetName);// "SheetJS" 取出工作表名称

const worksheet = workbook.Sheets[firstSheetName]; //取出工作表名称对应的表格数据

const header = this.getHeaderRow(worksheet); //表头名

// console.log("header",header);

const results = XLSX.utils.sheet_to_json(worksheet); //输出数据，除去表头

//{timestamp: "2017-01-01 07:37:20",title: "Mtiwxlj Cqcdg Hvbjijr Vgmeey Wwznq Ljjnkvbz",

//type: "US",importance: 2,status: "draft"} results的其中一列数据

this.tableData = results;

this.tableHeader = header;

this.loading = false;

this.doTableData()

resolve();

};

});

},

getHeaderRow(sheet) {

const headers = [];

const range = XLSX.utils.decode_range(sheet["!ref"]); //!ref: "A1:E21"

// console.log(range);

// s: {c: 0, r: 0} 开始为A1

// e: {c: 4, r: 20} 结束为 E21

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 })];

// console.log(cell); A1的对象的值

/* find the cell in the first row */

let hdr = "UNKNOWN " + C; // <-- replace with your desired default

if (cell && cell.t){//不为空才push表头

hdr = XLSX.utils.format_cell(cell);

headers.push(hdr);

}

}

return headers;

},

isExcel(file) {

return /\.(xlsx|xls|csv)$/.test(file.name);

},

.......

　}

</script>