前端 + 后台（实现导出）功能

最新推荐文章于 2024-07-02 00:00:00 发布

Copy_忠

最新推荐文章于 2024-07-02 00:00:00 发布

阅读量435

点赞数

文章标签：前端 vue.js javascript

本文链接：https://blog.csdn.net/qq_65005911/article/details/132807710

版权

本文介绍了三种前端导出数据的方式：通过点击链接下载封装好的数据，解析后台文件流并创建下载链接，以及直接接收数据动态生成Excel表格。详细展示了JavaScript代码实现过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

本人已知的导出实现方式有三种：

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);