本人已知的导出实现方式有三种:
1.点击链接、2.解析后台返回的文件流、3.接收数据,纯前端实现
- 点击链接:数据、文件格式全部在后台封装好,返回给前端一个链接,前端通过点击链接自动下载,两种方式:
/* 第一种 */ window.location.href = 'url'; /* 第二种 */ <a href='url' download=''></a>
- 解析后台返回的文件流:这种方式就是后台将要导出的文件以文件流的方式返回给前端,前端通过blob去解析,再动态创建a标签。
/* 导出(HTML)解释:form ---代表后端需要的参数数据 */ <el-button size="mini" icon="el-icon-upload2" type="primary" @click="exportCouponFn(form)"> 导出 </el-button> /* 导出(JS) */ exportCouponFn (form) { this.$message.info('正在导出,请稍等...') setTimeout(() => { exportCouponApi(form.id).then(res => { // 封装好的接口Api请求 if (200 === res.status) { let content = res.data; // 文件流 let blob = new Blob([content], {type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8'}); let contentDisposition = res.headers['content-disposition']; let fileName = decodeURI(contentDisposition.split('=')[1]); if ('download' in document.createElement('a')) { // 非IE下载 let link = document.createElement('a'); link.download = '批量指定多商优惠券导出信息'; // 文件标题名 link.target = "_blank"; link.href = URL.createObjectURL(blob); document.body.appendChild(link); link.click(); URL.revokeObjectURL(link.href); // 释放URL 对象 document.body.removeChild(link); } else { // IE10 + Download navigator.msSaveBlob(blob, fileName); } Message.closeAll() this.$message.success('导出成功~') } }).catch(err => { console.error('接口错误err', err) }) }, 1000) }
- 接收数据,纯前端实现:这种方式就是后台只需提供对应的数据即可,前端动态生成表格数据,再格式化。
let excel = '<table>'; // 生成表头 let row = '<tr>' + '<td>标题1</td>' + '<td>标题2</td>' + '<td>标题3</td>' + '</tr>'; excel += row + '</tr>'; // 循环生成表身 for(let i = 0 ; i < this.excelData.length ; i++ ){ excel += '<tr>'; for(let item in this.excelData[i]){ //增加\t为了不让表格显示科学计数法或者其他格式 if (!this.excelData[i][item]) { this.excelData[i][item] = ''; } excel +=`<td>${ this.excelData[i][item] + '\t'}</td>`; } excel +='</tr>'; } excel += '</table>'; //下载的表格模板数据 var excelFile = '<html xmlns:o="urn:schemas-microsoft-com:office:office" ' + 'xmlns:x="urn:schemas-microsoft-com:office:excel" xmlns="http://www.w3.org/TR/REC-html40">'; excelFile += '<meta http-equiv="content-type" content="application/vnd.ms-excel; charset=UTF-8">'; excelFile += '<meta http-equiv="content-type" content="application/vnd.ms-excel"'; excelFile += ' charset="UTF-8">'; excelFile += '<head>'; excelFile += '<!--[if gte mso 9]>'; excelFile += '<xml>'; excelFile += '<x:ExcelWorkbook>'; excelFile += '<x:ExcelWorksheets>'; excelFile += '<x:ExcelWorksheet>'; excelFile += '<x:Name>'; excelFile += 'sheet'; excelFile += '</x:Name>'; excelFile += '<x:WorksheetOptions>'; excelFile += '<x:DisplayGridlines/>'; excelFile += '</x:WorksheetOptions>'; excelFile += '</x:ExcelWorksheet>'; excelFile += '</x:ExcelWorksheets>'; excelFile += '</x:ExcelWorkbook>'; excelFile += '</xml>'; excelFile += '<![endif]-->'; excelFile += '</head>'; excelFile += '<body>'; excelFile += excel; excelFile += '</body>'; excelFile += '</html>'; //下载模板 let uri = 'data:application/vnd.ms-excelcharset=utf-8,' + encodeURIComponent(excelFile); let link = document.createElement('a'); link.href = uri; link.style = 'visibility:hidden'; let myDate = new Date(); let time = myDate.toLocaleDateString().split('/').join('-'); link.download = 'fileName' + time + '.xls'; document.body.appendChild(link); link.click(); document.body.removeChild(link);