Vue中 element的table表格导入 与 导出为excel表格的实现
Posted Gik99
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Vue中 element的table表格导入 与 导出为excel表格的实现相关的知识，希望对你有一定的参考价值。
Vue中 element的table表格导入 与 导出为excel表格的实现
一、导入
2.1 安装xlsx插件
$ npm i xlsx@0.17.0
2.2 新建导入功能组件
新建组件 UploadExcel/index.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>
2.3 注册全局的导入excel组件
src\\components\\index.js
import PageTools from './PageTools'
import UploadExcel from './UploadExcel'
export default
install(Vue)
Vue.component('PageTools', PageTools) // 注册工具栏组件
Vue.component('UploadExcel', UploadExcel) // 注册导入excel组件
2.4 创建导入路由组件
<template>
<!-- 公共导入组件 -->
<upload-excel :on-success="success" />
</template>
2.5 封装导入接口 实现excel导入
import importEmployee from '@/api/employees'
// 在methods中修改success函数
async success( header, results )
// 如果是导入员工
const userRelations =
'入职日期': 'timeOfEntry',
'手机号': 'mobile',
'姓名': 'username',
'转正日期': 'correctionTime',
'工号': 'workNumber'
// const arr = []
// results.forEach(item =>
// const userInfo =
// Object.keys(item).forEach(key =>
// userInfo[userRelations[key]] = item[key]
// )
// arr.push(userInfo)
// )
// await importEmployee(arr) // 调用导入接口
// map 函数 通过指定函数处理数组的每个元素，并返回处理后的数组。
// map() 方法返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值
var newArr = results.map(item =>
var userInfo =
Object.keys(item).forEach(key =>
userInfo[userRelations[key]] = item[key]
)
return userInfo
)
await importEmployee(newArr) // 调用导入接口
this.$message.success('导入excel成功')
this.$router.back() // 回到上一个页面
2.6 导入时间格式的处理
定义事件处理方法 调用此方法
formatDate(numb, format)
const time = new Date((numb - 1) * 24 * 3600000 + 1)
time.setYear(time.getFullYear() - 70)
const year = time.getFullYear() + ''
const month = time.getMonth() + 1 + ''
const date = time.getDate() - 1 + ''
if (format && format.length === 1)
return year + format + month + format + date
return year + (month < 10 ? '0' + month : month) + (date < 10 ? '0' + date : date)
二、导出
2.1 安装excel所需依赖和按需加载
npm install xlsx@0.17.0 file-saver -S
npm install script-loader -S -D
2.2 vue-element-admin提供的导出功能模块
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]vue vuecli element table 表格 获取行数据
是这样的,页面是商品列表
使用了element-ui 中的 el-table
正常渲染是没问题的,可是我需要显示商品图片,这就需要先获取到每个商品对象的图片路径,但是看element文档没有说怎么获取数据的,只是能够在列中使用prop
经过百度,知道了vue的插槽,代码如下
<el-table :data="goods" stripe border style="width: 100%">
<el-table-column prop="name" label="名称" width="180"></el-table-column>
<el-table-column label="图片" width="50">
<template v-slot="shuju">
<el-image :src="‘/static/images/food/‘+shuju.row.img"></el-image>
</template>
</el-table-column>
<el-table-column prop="typeid" label="typeid" width="100"></el-table-column>
<el-table-column prop="price" label="单价" width="100"></el-table-column>
<el-table-column prop="xiaoliang" label="销量" width="50"></el-table-column>
<el-table-column label="操作"></el-table-column>
</el-table>
图片列中,使用了插槽,原先是slot-scope,貌似新版本打算弃用,使用了v-slot "shuju"是随便写的名字,只要里面调用就可以了 shuju.row 是获取的商品对象,shuju.row.img就是我需要的图片路径
以上是关于Vue中 element的table表格导入 与 导出为excel表格的实现的主要内容，如果未能解决你的问题，请参考以下文章
如何在表格中添加图片（使用el-table、el-table-column），即在Vue.js中使用ui-element？
vue vuecli element table 表格 获取行数据
vue+element ui el-table 完成动态添加表格&&动态合并/踩坑记录
vue+element 中的table表格中，计算的操作该怎么实现？