vue + element + 导入、导出excel表格
element
A Vue.js 2.0 UI Toolkit for Web
项目地址:https://gitcode.com/gh_mirrors/eleme/element
免费下载资源
·
相关文档: https://blog.csdn.net/qq_37141546/article/details/78852198
导入、导出:https://www.cnblogs.com/liguiwang/p/8430672.html
导入表格:
<input type="file" @change="importf(this)" accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel"/>
importf(obj) {
let _this = this;
let inputDOM = this.$refs.inputer; // 通过DOM取文件数据
this.file = event.currentTarget.files[0];
var rABS = false; //是否将文件读取为二进制字符串
var f = this.file;
var reader = new FileReader();
//if (!FileReader.prototype.readAsBinaryString) {
FileReader.prototype.readAsBinaryString = function(f) {
var binary = "";
var rABS = false; //是否将文件读取为二进制字符串
var pt = this;
var wb; //读取完成的数据
var outdata;
var reader = new FileReader();
reader.onload = function(e) {
var bytes = new Uint8Array(reader.result);
var length = bytes.byteLength;
for(var i = 0; i < length; i++) {
binary += String.fromCharCode(bytes[i]);
}
var XLSX = require('xlsx');
if(rABS) {
wb = XLSX.read(btoa(fixdata(binary)), { //手动转化
type: 'base64'
});
} else {
wb = XLSX.read(binary, {
type: 'binary'
});
}
// outdata就是你想要的东西 excel导入的数据
outdata = XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]]);
// excel 数据再处理
let arr = []
outdata.map(v => {
let obj = {}
obj.account = v.登录账号
obj.name = v.姓名
obj.department = v.部门
obj.secondDepartment = v.二级部门
obj.status = v.状态
obj.id = v.id
arr.push(obj)
})
_this.accountList = [...arr];
console.log( _this.accountList)
_this.reload();
}
reader.readAsArrayBuffer(f);
}
if(rABS) {
reader.readAsArrayBuffer(f);
} else {
reader.readAsBinaryString(f);
}
}
导出表格:
1.依赖安装
cnpm install -S file-saver xlsx
cnpm install -D script-loader
注意: 对于请求的数据有分页参数的,pageSize 需设置为无限大,打印出的excel 才是全部的数据,
若是pageSize 不够大,只请求到了一部分数据,当然打印出来也只是部分数据
exportExcel: function(){
require.ensure([], () => {
const { export_json_to_excel } = require('../../vendor/Export2Excel');
const tHeader = ['投资顾问', '产品', '持仓', '建仓时间', '建仓理由', "联系电话"]; //对应表格输出的title
const filterVal = ['nickname', 'product_name', 'STOCK_NAME', 'CREATE_DATE', 'product_status','reason','mobile']; // 对应表格输出的数据
console.log(returnCitySN);
const param = {
pageNumber : this.currentPage,
pageSize : this.pagesize, // 99999
reasonStat: this.reasonStat,
mobile: this.search.mobile,
nickname: this.search.nickname,
productName: this.search.productName,
accessIp : returnCitySN["cip"],
accessCity : encodeURI(encodeURI(returnCitySN["cname"]))
};
getAllPortfolioPosition(param).then((data) => {
const exceldata = this.formatJson(filterVal, data.positions);
export_json_to_excel(tHeader, exceldata, '持仓监控excel'); //对应下载文件的名字
})
}) },
2.传递参数 打开后台网址
exportExcel() {
let start =
this.formInline.timeRange == null ?
"" :
this.$check.formatDateTime(this.formInline.timeRange[0]);
let end =
this.formInline.timeRange == null ?
"" :
this.$check.formatDateTime(this.formInline.timeRange[1]);
let url =
"/mobilepay-management/creditCard/admin/exportOrderExcel?merchantNo=" +
this.formInline.merchantNo +
"&gmtCreateStart=" +
start +
"&gmtCreateEnd=" +
end +
"&repaymentAmountMin=" +
this.formInline.repaymentAmountMin +
"&repaymentAmountMax=" +
this.formInline.repaymentAmountMax +
"&withdrawStatus=" +
this.generationStatus +
"&withholdingStatus=" +
this.payStatus;
console.log(url);
window.open(url);
}
3.导出模板(空的excel)
outExe: function(){
require.ensure([], () => {
const { export_json_to_excel } = require('@/vendor/Export2Excel'); //引入文件
const tHeader = ['登录账号', '姓名', '部门', '二级部门', '状态']; //将对应的属性名转换成中文
const data = [];
export_json_to_excel(tHeader, data, '用户账号模板');
})
},
GitHub 加速计划 / eleme / element
54.06 K
14.63 K
下载
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:3 个月前 )
c345bb45
7 个月前
a07f3a59
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update table.md
* Update transition.md
* Update popover.md 7 个月前
更多推荐
已为社区贡献1条内容
所有评论(0)