项目场景:
移动端将列表数据导出到excel表格并导出下载
问题描述
网上有很多web端导出数据的例子,但是并不适用于移动端,以下是web端和h5端导出的代码
web端导出代码(需要后端返回数据列表list信息,无需http地址,h5端下载只能通过http地址)【前端即可完成导出,无需后端合成】
exportData() { let _this = this; let params = {} params.optId = _this.param.optId; params.currentPage = 1; params.pageSize = 100000; let param = { "businessParam": params, "relayId": "0201405" }; axios.post(axios.requestUrl, param).then(function (res) { if (res.success) { var result = eval("(" + res.result + ")"); if (result.data) { _this.allList = _this.allList.concat(result.data.data); const tHeader = [ '批次号', '账号', '失效时间', '备注', 'objectType', 'objectId', '是否上发', '上发状态', 'actionId' ];//头 const filterVal = [ 'optId', 'phoneNo', 'expireTime', 'remark', 'objectType', 'objectId', 'isUpdate', 'updateState', 'actionId' ];//值 const data = _this.formatJson(filterVal, _this.allList); export_json_to_excel({ header: tHeader, data, filename: '导出数据' }) } else { Toast('请先查询到数据后再进行导出'); } } else { // Notify({type: 'warning', message: res.message, duration: 1000}) Toast(res.message); } }).catch(function (err) { // Notify({type: 'danger', message: err.message, duration: 3000}); Toast.fail(err.message); }); },
h5移动端导出数据
let openUrl="http://"+window.location.host+url; var user = navigator.userAgent; //android端 var isAndroid = user.indexOf("Android") > -1 || user.indexOf("Adr") > -1; //ios端 var isiOS = !!user.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); if(isAndroid) { window.open(openUrl) }else if(isiOS) { window.location.href = openUrl; }else{ window.open(openUrl) }
wen端下载若使用new Blob()方式下载,下载的文件名不能包含[]。否则会报错400,尽量不使用[],或者前台将[]转换为对应的编码 [ 对应 %5b ,] 对应%5d。