vue2,vue3导入导出插件js-xlsx(表格),后台导入导出
通过接口后台导入导出,纯前端导出功能
·
前端导出
官方文档:js-xlsx - npm
vue2引入文件方式:2种方式皆可
var XLSX = require("xlsx");
import XLSX from 'xlsx';
vue3引入方式:引入方式不对会报错
import * as XLSX from 'xlsx';
方法使用时一样的
var XLSX = require("xlsx");
var arr = [
['name', 'sex', 'ages'],
['Dawei', '男', 20],
['Limei', '女', 21]
];
//var arr=[{name:'Dawei',sex:'男',ages:'20'},{name:'Limei',sex:'女',ages:'21'}]
//var worksheet = XLSX.utils.json_to_sheet(arr);
var worksheet = XLSX.utils.aoa_to_sheet(arr);
let workbook = XLSX.utils.book_new();
XLSX.utils.book_append_sheet(workbook,worksheet,'第一页')
XLSX.writeFile(workbook,'人物属性.xlsx')
安装:npm install xlsx --save
名称 | 说明 | 参数 |
---|---|---|
read | 解析函数 | (data, read_opts) |
readFile | 读取文件 | (filename, read_opts) |
write | 编写函数 | (wb, write_opts) |
writeFile | 写入工作簿 | (workbook,wopts)例:wopts = { bookType:'xlsx', bookSST:false, type:'binary' } |
utils | 实例方法 | 例:utils.sheet_to_csv,具体查看官方文档 |
通过接口后台导出
postExcle:(res)=>{//后台下载xlsx
const url = window.URL.createObjectURL(new Blob([res.data]))
var filename = res.headers//下载后文件名
filename = filename["content-disposition"]
filename = filename.split(";")[1].split("filename=")[1];
const link = document.createElement('a')
link.style.display = 'none'
link.href = url
link.download = `${decodeURI(filename)}`
document.body.appendChild(link)
link.click()
document.body.removeChild(link)
}
}
注:调用的时候直接把接口返回值放进去就好了,有的后台返回的文件流不是data包起来的对象,这个时候就直接使用res就好了。
后台导入
<el-upload
ref="upload"
:auto-upload="false"
:show-file-list="false"
action=""
accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel"
:http-request="httpRequest"
:on-change="handleChange">
<el-input v-model="uploadText" size="small" readonly>
<template slot="append">浏览</template>
</el-input>
</el-upload>
-
action:上传的地址
-
accept:上传的格式,这个地方我是设置的上传表格限制
-
auto-upload:是否自动上传,因这里是手动上传,所以设置为false
-
http-request:自定义上传的方法,会覆盖默认的上传行为(即action="url")
-
on-change:上传文件状态(添加,上传成功或失败)改变时触发的方法
httpRequest(data){//上传文件
const formData = new FormData() //FormData对象,添加参数只能通过append('key', value)的形式添加
formData.append('file', data.file) //添加文件对象
this.$api.postOKcardImport(formData).then(res=>{
if(res.code==0){
this.$message.success(res.message)
}else{
this.$message.error(res.data)
}
})
},
postOKcardImport(params){
return instance.post(`/ok/import`,params,{headers: {'application': 'multipart/form-data'}})
}
注意:FormData对象,添加参数只能通过append('key', value)的形式添加
请求头需要更改成headers: {'application': 'multipart/form-data'}这个格式
更多推荐
已为社区贡献4条内容
所有评论(0)