前端如何利用JavaScript导出excel文件

 前端开发过程中常见的需求有:需要根据后台接口导出一份excel表格,可以利用以下做法实现。

let postObj = {a:'1'} // 请求提交的对象
axios({
          // 用axios发送post请求
          method: "post",
          url: "/test/getExcel", // 请求地址
          data: postObj, // 参数
          responseType: "blob" // 表明返回服务器返回的数据类型
        }).then(res => {
          // 处理返回的文件流(
          const content = res.data;
          const blob = new Blob([content]);
          const fileName = "excelName.xsl"; // 下载文件名称,可自定义
          if ("download" in document.createElement("a")) {
            // 非IE下载
            const elink = document.createElement("a");
            elink.download = fileName;
            elink.style.display = "none";
            elink.href = URL.createObjectURL(blob);
            document.body.appendChild(elink);
            elink.click();
            URL.revokeObjectURL(elink.href); // 释放URL 对象
            document.body.removeChild(elink);
          } else {
            // IE10+下载
            navigator.msSaveBlob(blob, fileName);
          }
        }).catch(err => console.log(err))

 

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
前端中,你可以使用以下方法来实现导入和导出 Excel 文件: 1. 导出 Excel 文件: - 使用 Excel.js、xlsx-populate、xlsx-writer 等库来生成 Excel 文件。 - 将数据转换为 Excel 格式并下载到客户端。在浏览器中,你可以创建一个 Blob 对象,然后使用 URL.createObjectURL(blob) 方法来生成下载链接,最后使用 a 标签的 download 属性来触发下载。 2. 导入 Excel 文件: - 使用第三方库如 exceljs、xlsx、xlsx-populate 等来读取和解析 Excel 文件。 - 通过文件输入(input file)元素让用户选择要上传的 Excel 文件,并使用 FileReader 对象读取文件内容。 - 使用解析库将读取到的数据进行处理,如解析为 JSON 或者直接处理为 JavaScript 对象。 以下是一个使用 SheetJS/xlsx 库导入导出 Excel 文件的示例: ```html <!-- 导入 Excel 文件 --> <input type="file" id="file-input" accept=".xlsx,.xls" /> <!-- 导出 Excel 按钮 --> <button id="export-btn">导出 Excel</button> <script src="https://unpkg.com/xlsx/dist/xlsx.full.min.js"></script> <script> // 导入 Excel 文件 document.getElementById('file-input').addEventListener('change', function(event) { var file = event.target.files[0]; var reader = new FileReader(); reader.onload = function(e) { var data = new Uint8Array(e.target.result); var workbook = XLSX.read(data, { type: 'array' }); // 处理 Excel 数据 var sheetName = workbook.SheetNames[0]; var worksheet = workbook.Sheets[sheetName]; var jsonData = XLSX.utils.sheet_to_json(worksheet, { header: 1 }); console.log(jsonData); }; reader.readAsArrayBuffer(file); }); // 导出 Excel 文件 document.getElementById('export-btn').addEventListener('click', function() { var worksheet = XLSX.utils.json_to_sheet([ { Name: 'John Doe', Age: 30 }, { Name: 'Jane Smith', Age: 25 } ]); var workbook = XLSX.utils.book_new(); XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1'); var excelBuffer = XLSX.write(workbook, { bookType: 'xlsx', type: 'array' }); var blob = new Blob([excelBuffer], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' }); var url = URL.createObjectURL(blob); var a = document.createElement('a'); a.href = url; a.download = 'data.xlsx'; a.click(); URL.revokeObjectURL(url); }); </script> ``` 这是一个基本的示例,你可以根据需求进行修改和扩展。记得在实际使用中引入相应的库文件,并根据实际情况进行数据处理和样式设置。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值