前端 XMLHttpRequest 实现下载excel文件

最新推荐文章于 2025-03-14 17:51:05 发布

加尔牛

最新推荐文章于 2025-03-14 17:51:05 发布

阅读量2.4k

点赞数

分类专栏： Web 文章标签： web 前端

本文链接：https://blog.csdn.net/Angel_jn/article/details/108059927

版权

Web 专栏收录该内容

14 篇文章

订阅专栏

本文介绍了前端实现Excel文件下载的三种方法：1. 后端返回下载链接；2. 后端提供文件流，前端使用Blob处理；3. 前端生成表格并使用模板下载。每种方法都有详细的代码示例。

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

前端下载excel文件 三种方式：
1、后端处理好直接返回前端一个链接 前端点链接下载
            window.location.href = ‘url’
            <a href='url' download=''></a>

2、后端直接将文件流传给前端 前端拿到文件流通过blob处理
      html:
        <button id="btn">下载excel文档</button>

      js:
       <script>
         var btn = document.getElementById('btn');
         btn.onclick = function() {
            const xhr = new XMLHttpRequest();
            xhr.open('get', 'http://192.168.1.102:3333/');
            xhr.send();
            xhr.responseType = 'blob'; //设置请求回来的数据为blob方式
            xhr.onreadystatechange = function() {
                if (xhr.readyState == 4 && xhr.status == 200) {
                    // 数据在 this.response 保存
                    // excel 的 MIME 格式为 application/vnd.ms-excel
                    var blob = new Blob([this.response], {
                        type: "application/vnd.ms-excel"
                    });
                    // 创建a链接 href链接地址 download为下载下来后文件的名称
                    var aa = document.createElement('a');
                    aa.href = URL.createObjectURL(blob);
                    aa.innerHTML = 'a链接';
                    aa.download = 'aa.xls';
                    aa.style.display = 'none'; //隐藏a标签 直接调用a标签的点击事件
                    document.body.appendChild(aa);
                    aa.click();
                }
            }
        };
       </script>
3、后端只需将数据给前端 前端自己生成表格 再使用文件模板形成文件
  html:
        <button id="btn">下载excel</button>
  js:
     <script>
        //模拟的后端数据：
       var data = [{
            name: '张三',
            sex: '男',
            age: 20,
            address: '浙江嘉兴',
            caddress: '河南开封'
        }, {
            name: '王五',
            sex: '男',
            age: 10,
            address: '江苏南京',
            caddress: '河南洛阳'
        }, {
            name: '张小黑',
            sex: '男',
            age: 30,
            address: '浙江杭州',
            caddress: '山东禹城'
        }];
        // 从点击按钮开始
         var btn = document.getElementById('btn');
         btn.onclick = function() {
            //动态生成表格
            var excel = '<table>';
            var tr = `<tr>
                    <td>name</td>
                    <td>sex</td>
                    <td>age</td>
                    <td>address</td>
                    <td>caddress</td>
                    </tr>`;
            excel += tr;
            for (var i = 0; i < data.length; i++) {
                var trr = `<tr>
                            <td>${data[i].name}</td>
                            <td>${data[i].sex}</td>
                            <td>${data[i].age}</td>
                            <td>${data[i].address}</td>
                            <td>${data[i].caddress}</td>
                            </tr>`;
                excel += trr;
            }
            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>';
            // 拼接成url格式 作为a链接的href
            var url = 'data:application/vnd.ms-excelcharset=utf-8,' + encodeURIComponent(excelFile);
            var aa = document.createElement('a');
            document.body.appendChild(aa);
            aa.href = url;
            aa.style.display = 'none';
            aa.innerHTML = '链接'
            aa.download = '链接.xls';
            aa.click();
        }
    </script>