上传和导出excel表格
2018-12-12 本文已影响0人
简小咖
导出excel
1、安装依赖
npm install xlsx file-saver -S
npm install script-loader -S -D
2、需要两个文件
Blob.js和 Export2Excel.js,可以百度下载
项目中新建一个文件夹vendor,放这两个文件
3、vue写方法
handleDownload() {
//请求后端接口拿到list数据
download().then(response => {
if (response.data) {
this.downList = response.data.data
} else {
this.downList = []
}
import('@/vendor/Export2Excel').then(excel => {
const tHeader = ['编号', '地市', '姓名', '交易金额', '下单时间']
//表格第一行标题
const filterVal = ['orderId', 'cityName', 'Name', 'payAmount', 'creatDate']
//表格跟接口字段对应
const list = this.downList
const data = this.formatJson(filterVal, list) //数据过滤
excel.export_json_to_excel({
header: tHeader, //表头 必填
data, //具体数据 必填
filename: 'excel-list', //文件名 非必填
autoWidth: true, //单元格是否要自适应宽度 非必填
bookType: 'xlsx' //非必填Ï
})
this.downloadLoading = false
})
}).catch(() => {
this.downloadLoading = false
})
},
// 过滤数据方法,例如时间格式
formatJson(filterVal, jsonData) {
return jsonData.map(v => filterVal.map(j => {
if (j === 'creatDate') {
var date = new Date(v[j])
return formatTime(date, 'yyyy-MM-dd hh:mm:ss')
} else {
return v[j]
}
}))
},
上传文件 格式要注意
const formData = new FormData()
formData.append('token', getToken())
formData.append('file', data.file)
formData.append('appName', data.appName)
请求接口配置post
{
url: '.....',
method: 'POST',
data: formData,
headers: {
'Content-Type': 'multipart/form-data'
}
``
步骤和传图片一样