js调用后台接口下载Excel

  // 按钮点击事件
  $('#download').click(function () {
        var xhr = new XMLHttpRequest();
        xhr.open('POST', "接口url", true);
        xhr.responseType = "blob"; // 返回类型blob
        // 定义请求完成的处理函数,请求前也可以增加加载框/禁用下载按钮逻辑
        xhr.onload = function () {
          // 请求完成
          if (this.status === 200) {
            var blob = this.response;
            var reader = new FileReader();
            reader.readAsDataURL(blob); // 转换为base64,可以直接放入a标签href
            reader.onload = function (e) {
              // 转换完成,创建一个a标签用于下载
              var a = document.createElement('a');
              a.href = e.target.result;
              a.download = '导出表格名字.xls';
              $("body").append(a); // 修复firefox中无法触发click
              a.click();
              $(a).remove();
            }
          }
        };
        // 发送ajax请求
        xhr.send()
      });

自己找不到是参考哪个的修改的了
问题,其实后台接口是给了表格名字的,但是js获取的都是乱码,所以直接这里给的表格名字

在Vue.js中,调用后台接口实现数据导出功能通常涉及到两个步骤:发送HTTP请求获取数据以及将数据导出为文件(比如CSV或Excel)。这里是一个简单的示例,假设我们使用axios库来发送GET请求,并且使用js-file-excel库来生成Excel文件: ```html <!-- Vue组件模板 --> <button @click="exportData">导出数据</button> <script> import axios from 'axios'; import { createExcel } from 'js-file-excel'; export default { data() { return { // 假设这是你要导出的数据 dataList: [], }; }, methods: { async exportData() { try { const response = await axios.get('your-api-url'); // 替换为实际的API地址 // 检查数据是否成功获取 if (response.data) { this.dataList = response.data; // 将数据赋值给dataList // 创建Excel文件 const excelData = { sheetNames: ['Sheet1'], // 单元格标签 sheets: { Sheet1: this.dataList, // 数据映射到单元格 }, }; // 导出Excel文件 createExcel(excelData).then((blob) => { const url = URL.createObjectURL(blob); const a = document.createElement('a'); a.href = url; a.download = 'data.xlsx'; // 文件名 a.click(); }); } else { alert('无法获取数据,请检查API'); } } catch (error) { console.error('Error:', error); } }, }, }; </script> ``` 在这个例子中,用户点击"导出数据"按钮时,会触发`exportData`方法。首先发送请求获取数据,如果成功则处理响应并将数据保存到`dataList`,然后创建一个包含这些数据的Excel文件并通过下载链接将其导出。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值