vue工具组件 ——实现导入导出excel文件
Posted 咖啡壶子
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vue工具组件 ——实现导入导出excel文件相关的知识，希望对你有一定的参考价值。
具体的实现以黑马的HR人力资源管理系统为准http://ihrm-java.itheima.net/
需要下载的点链接https://download.csdn.net/download/TroyeSivanlp/83339582
导入导出excel文件
导入excel
1.需要下载xlsx依赖
npm i xlsx
2.工具组件
UploadExcel.vue
<template>
<div class="upload-excel">
<div class="btn-upload">
<el-button :loading="loading" size="mini" type="primary" @click="handleUpload">
点击上传
</el-button>
</div>
<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">
<i class="el-icon-upload" />
<span>将文件拖到此处</span>
</div>
</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)
,
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 <= 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 lang="scss">
.upload-excel
display: flex;
justify-content: center;
margin-top: 100px;
.excel-upload-input
display: none;
z-index: -9999;
.btn-upload,
.drop
border: 1px dashed #bbb;
width: 350px;
height: 160px;
text-align: center;
line-height: 160px;
.drop
line-height: 80px;
color: #bbb;
i
font-size: 60px;
display: block;
</style>
3.练习：导入的demo
templete
<el-upload
class="upload-demo"
drag
action="/api/user/process/deploy"
:headers="myheader"
:on-error="uploadFail"
:on-success="handleFileSuccess"
:show-file-list="false"
:file-list="fileList"
>
<i class="el-icon-upload" />
<div class="el-upload__text">将文件拖到此处</div>
</el-upload>
</span>
<span slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false">取 消</el-button>
<el-button type="primary" @click="dialogVisible = false">确 定</el-button>
</span>
methods:（大概看看，不要纠结变量。看逻辑）
uploadFail(err, file, fileList)
this.uploadTip = '点击上传'
this.processing = false
this.$message.error(err)
,
// 上传成功
handleFileSuccess(obj, file, fileList)
this.uploadTip = '点击上传'
this.processing = false
this.dialogImportVisible = false
if (obj.code === 99999)
this.$message.error('导入失败' + '!')
else
this.$message.success('导入成功' + '!')
this.$router.back(-1)
导出成excel
1.导出成excel工具类
Export2Excel.js
/* eslint-disable */
import saveAs from 'file-saver'
import XLSX from 'xlsx'
function generateArray(table)
var out = [];
var rows = table.querySelectorAll('tr');
var ranges = [];
for (var R = 0; R < rows.length; ++R)
var outRow = [];
var row = rows[R];
var columns = row.querySelectorAll('td');
for (var C = 0; C < columns.length; ++C)
var cell = columns[C];
var colspan = cell.getAttribute('colspan');
var rowspan = cell.getAttribute('rowspan');
var cellValue = cell.innerText;
if (cellValue !== "" && cellValue == +cellValue) cellValue = +cellValue;
//Skip ranges
ranges.forEach(function (range)
if (R >= range.s.r && R <= range.e.r && outRow.length >= range.s.c && outRow.length <= range.e.c)
for (var i = 0; i <= range.e.c - range.s.c; ++i) outRow.push(null);
);
//Handle Row Span
if (rowspan || colspan)
rowspan = rowspan || 1;
colspan = colspan || 1;
ranges.push(
s:
r: R,
c: outRow.length
,
e:
r: R + rowspan - 1,
c: outRow.length + colspan - 1
);
;
//Handle Value
outRow.push(cellValue !== "" ? cellValue : null);
//Handle Colspan
if (colspan)
for (var k = 0; k < colspan - 1; ++k) outRow.push(null);
out.push(outRow);
return [out, ranges];
;
function datenum(v, date1904)
if (date1904) v += 1462;
var epoch = Date.parse(v);
return (epoch - new Date(Date.UTC(1899, 11, 30))) / (24 * 60 * 60 * 1000);
function sheet_from_array_of_arrays(data, opts)
var ws = ;
var range =
s:
c: 10000000,
r: 10000000
,
e:
c: 0,
r: 0
;
for (var R = 0; R != data.length; ++R)
for (var C = 0; C != data[R].length; ++C)
if (range.s.r > R) range.s.r = R;
if (range.s.c > C) range.s.c = C;
if (range.e.r < R) range.e.r = R;
if (range.e.c < C) range.e.c = C;
var cell =
v: data[R][C]
;
if (cell.v == null) continue;
var cell_ref = XLSX.utils.encode_cell(
c: C,
r: R
);
if (typeof cell.v === 'number') cell.t = 'n';
else if (typeof cell.v === 'boolean') cell.t = 'b';
else if (cell.v instanceof Date)
cell.t = 'n';
cell.z = XLSX.SSF._table[14];
cell.v = datenum(cell.v);
else cell.t = <以上是关于vue工具组件 ——实现导入导出excel文件的主要内容，如果未能解决你的问题，请参考以下文章