VUE中导入导出excel
一、需要安装三个依赖:https://blog.csdn.net/qq_41062586/article/details/80570136二、下载downuser为VUE获取到的数组数据//下载require.ensure([], () => {require('@/libs/jquery');const { e...
一、需要安装三个依赖:
https://blog.csdn.net/qq_41062586/article/details/80570136
二、下载
downuser为VUE获取到的数组数据
//下载
require.ensure([], () => {
require('@/libs/jquery');
const { export_json_to_excel } = require('@/libs/Export2Excel');
const tHeader = ['成员', '分组', '角色'];
const filterVal = ['user_name', 'group_name', 'role_name'];
const list = self.downuser;
const data = self.formatJson(filterVal, list);
export_json_to_excel(tHeader, data, 'user');
})
formatJson(filterVal, jsonData){
return jsonData.map(v => filterVal.map(j => v[j]));
},
三、上传
<div class="tips-import">
<el-dialog title="导入人员" :visible.sync="importVisible" width="700px" :before-close="handleClose">
<div class="content">
<div class="import-intro">
<span class="mgr20">导入说明:文件必须xls或xlsx格式</span>
<el-button><a href="../../src/static/1.xlsx" download="1.xlsx">下载文件模版</a></el-button>
</div>
<div class="import-container">
<el-upload ref="upload" class=""
:drag="true" :multiple="false" action=""
:auto-upload="false" accept=".xlsx"
:on-change="importfxx" :on-remove="resetImport">
<img src="@/assets/wjmb.png" alt="" style="padding-top: 50px;">
<div class="el-upload__text">将文件拖到此处,或<em>点击上传</em></div>
</el-upload>
</div>
</div>
<span slot="footer" class="dialog-footer">
<el-button @click="importVisible = false">取 消</el-button>
<el-button type="primary" @click="importSubmit">确 定</el-button>
</span>
</el-dialog>
</div>
.tips-import {
text-align: left;
.el-dialog_wrapper{display: block;}
}
.content-box .content {
background: #fff;
.import-intro {
background: #fff5ea;
text-align: center;
padding: 10px;
margin-bottom: 30px;
.mgr20 {
margin-right: 20px;
}
}
.import-container {
border: 1px solid #dbdbdb;
text-align: center;
padding: 50px 0;
.mgbt30 {
margin: 20px 0;
}
}
.import-bottom {
border: 1px solid #dbdbdb;
border-top: none;
padding: 20px 10px;
background: #f5f5f5;
.select-container {
display: inline-block;
width: 300px;
height: 40px;
line-height: 40px;
padding-left: 10px;
border: 1px solid #dbdbdb;
box-sizing: border-box;
background: #fff;
position: relative;
img {
margin-right: 10px;
}
.select-item {
position: absolute;
background: #fff;
width: 100%;
left: 0;
box-sizing: border-box;
li {
padding-left: 10px;
&:hover {
background: #dbdbdb;
}
}
}
}
.change-dept {
float: right;
margin-right: 20px;
font-size: 16px;
line-height: 40px;
color: #409eff;
cursor: pointer;
}
}
}
//批量上传
importU(){
this.userData=[];
if(document.getElementsByClassName("el-upload").length) {
document.getElementsByClassName("el-upload")[0].style.display = "inline-block";
this.$refs.upload.clearFiles();
}
this.importVisible = true;
},
importfxx(file, fileList) {
document.getElementsByClassName("el-upload")[0].style.display="none";
// 通过DOM取文件数据;
let rABS = false; //是否将文件读取为二进制字符串
let f = file.raw;
let reader = new FileReader();
let vm=this;
FileReader.prototype.readAsBinaryString = function(f) {
let binary = "";
let rABS = false; //是否将文件读取为二进制字符串
let wb; //读取完成的数据
let reader = new FileReader();
reader.onload = function(e) {
let bytes = new Uint8Array(reader.result);
let length = bytes.byteLength;
for(let i = 0; i < length; i++) {
binary += String.fromCharCode(bytes[i]);
}
let XLSX = require('xlsx');
if(rABS) {
wb = XLSX.read(btoa(fixdata(binary)), { //手动转化
type: 'base64'
});
} else {
wb = XLSX.read(binary, {
type: 'binary'
});
}
vm.userData = XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]]);//outdata就是你想要的东西
}
reader.readAsArrayBuffer(f);
}
if(rABS) {
reader.readAsArrayBuffer(f);
} else {
reader.readAsBinaryString(f);
}
},
resetImport(file, fileList){
document.getElementsByClassName("el-upload")[0].style.display="inline-block";
},
importSubmit(){
let vm = this;
if(!vm.userData.length){
vm.$message.error({message:'请上传文件'});
return false;
}
let pdata = {'导入要传的值'};
util.ajax.post('路径',pdata).then(function (response) {
let res = response.data;
if (res.code == 200) {
vm.importVisible=false;
vm.$notify.error(d.message);
location.reload();
} else {
console.log(response);
}
});
},
未验证的:
GetPklExcelInfo().then(response => {
// GetPklExcelInfo 发请求的方法
if (window.navigator && window.navigator.msSaveOrOpenBlob) {
let blob = new Blob([response.data])
window.navigator.msSaveOrOpenBlob(blob, '数据导出.xls')
} else {
/* 火狐谷歌的文件下载方式 */
var blob = new Blob([response.data])
var downloadElement = document.createElement('a')
var href = window.URL.createObjectURL(blob)
downloadElement.href = href
downloadElement.download = '数据导出.xls'
document.body.appendChild(downloadElement)
downloadElement.click()
document.body.removeChild(downloadElement)
window.URL.revokeObjectURL(href)
}
})
},
更多推荐
所有评论(0)