使用js-xlsx将后端返回数据导出为excel(.xlsx格式)

最新推荐文章于 2024-05-27 23:07:51 发布
最新推荐文章于 2024-05-27 23:07:51 发布
阅读量1.9k 收藏 4
点赞数
分类专栏： javascript
原文链接：https://www.cnblogs.com/hill-foryou/p/9230182.html
版权 
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>


</head>
<body>

    <!-- <button id="export">Export Sheet to XLSX</button> -->
    <button onclick="downloadExl(jsono)">导出xlsx带样式</button>
    
    <button id="export2">导出xlsx</button>




    <!-- 使用js-xlsx将后端返回数据导出为excel(.xlsx格式) -->




    <!--  引入的js只能和下面相连的结合使用  使用时请注释掉138行以下-->
    <script src="js/xlsx.core.min.js"></script>
    <script>
        document.getElementById("export2").onclick = function() {


                // 导出多张表
                // let data = { '基本信息': [{name: '李四', sex: 'nan', age: 12}], '成绩': [{class: '计算机', teacher: 'Mrs wang', score: 90}] };
                // let columnHeaders = { '基本信息': ['name', 'sex', 'age'], '成绩': ['class', 'teacher', 'score']}
                // outputXlsxFile(
                //     data,
                //     [{ wch: 50 }, { wch: 50 }, { wch: 10 }],
                //     "test-xlsx"
                // );
        
                // function outputXlsxFile(data, wscols, xlsxName) {
                //     let sheetNames = [];
                //     let sheetsList = {};
                //     const wb = XLSX.utils.book_new();
                //     console.log(wb)
                //     for (let key in data) {
                //         sheetNames.push(key);
                //         let columnHeader = columnHeaders[key] // 此处是每个sheet的表头
                //         let temp = transferData(data[key], columnHeader);
                //         console.log(temp)
                //         sheetsList[key] = XLSX.utils.aoa_to_sheet(temp);
                //         sheetsList[key]["!cols"] = wscols;
                //     }
                //     console.log(sheetsList)
                //     wb["SheetNames"] = sheetNames;
                //     wb["Sheets"] = sheetsList;
            
                //     XLSX.writeFile(wb, xlsxName + ".xlsx");
                // }
        
                // function transferData(data, columnHeader) {
                //     let content = [];
                //     content.push(columnHeader);
                //     data.forEach((item, index) => {
                //         let arr = [];
                //         columnHeader.map(column =>{
                //         arr.push(item[column]);
                //         })
                //         content.push(arr);
                //     });
                //     return content;
                // }



                // // 导出一张表
                var sheetN = '我是表名字，不是导出文件名'
                var data = [{name: '后台返回数据11', sex: 'women', age: 56},{name: '后台返回数据2', sex: 'nan', age: 12}]
                var columnHeaders = ['name', 'sex', 'age']
                outputXlsxFile(
                    data,        // 数据
                    [{ wch: 50 }, { wch: 50 }, { wch: 10 }],   // 列宽
                    "test-xlsx"       // 导出文件名
                );
        
                function outputXlsxFile(data, wscols, xlsxName) {
                    let sheetsList = {};
                    console.log(XLSX.utils)
                    const wb = XLSX.utils.book_new();
                    let temp = transferData(data, columnHeaders);
                    temp.unshift(['我是表格上面的标题啊标题,不是表头不是表头'])
                    console.log(temp)
                    sheetsList[sheetN] = XLSX.utils.aoa_to_sheet(temp);
                    console.log(XLSX.utils.aoa_to_sheet(temp))
                    sheetsList[sheetN]["!merges"] = [{      //合并第一行数据，也就是表头[B1,C1,D1,E1]
                        s: {//s为开始
                            c: 0,//开始列
                            r: 0//开始取值范围
                        },
                        e: {//e结束
                            c: 4,//结束列
                            r: 0//结束范围
                        }
                    }];
                    sheetsList[sheetN]["!cols"] = wscols;
                    sheetsList[sheetN]["!rows"] = [{ hpx: 50 }];
                    // console.log(sheetsList)
                    // 官网写入样式api，但是引入xlsx.core.min.js没用
                    // sheetsList[sheetN]['A1'].s = { font: { sz: 14, bold: true, color: { rgb: "FFFFAA00" } }, fill: { bgColor: { indexed: 64 }, fgColor: { rgb: "FFFF00" } } }
                    wb["SheetNames"] = [sheetN];
                    wb["Sheets"] = sheetsList;
                    console.log(wb)
            
                    XLSX.writeFile(wb, xlsxName + ".xlsx",{defaultCellStyle: { font: {name: 'Arial', sz: '40'}}});

                    console.log(XLSX.utils)
                    function transferData(data, columnHeader) {
                        let content = [];
                        content.push(columnHeader);
                        data.forEach((item, index) => {
                            let arr = [];
                            columnHeader.map(column =>{
                                arr.push(item[column]);
                            })
                            content.push(arr);
                        });
                        return content;
                    }
                }
        }




        
      </script>



        <!-- 导出带样式 引入的js只能和下面相连的结合使用，注释掉135行以上-->
        <!-- <script src="js/xlsx.full.min.js"></script> -->
        <script>
            function saveAs(obj, fileName) {
                var tmpa = document.createElement("a");
                tmpa.download = fileName || "下载";
                tmpa.href = URL.createObjectURL(obj);
                tmpa.click();
                setTimeout(function () {
                    URL.revokeObjectURL(obj);
                }, 100);
            }
            var jsono = [{
                "id": 1, "合并的列头1": "数据11", "合并的列头2": "数据12", "合并的列头3": "数据13", "合并的列头4": "数据14",
            }, {
                "id": 2, "合并的列头1": "数据21", "合并的列头2": "数据22", "合并的列头3": "数据23", "合并的列头4": "数据24",
            }];
            const wopts = { bookType: 'xlsx', bookSST: true, type: 'binary', cellStyles: true };
            function downloadExl(json, type) {
                var tmpdata = json[0];
                json.unshift({});
                var keyMap = []; //获取keys
                for (var k in tmpdata) {
                    keyMap.push(k);
                    json[0][k] = k;
                }
                var tmpdata = [];//用来保存转换好的json 
                json.map((v, i) => keyMap.map((k, j) => Object.assign({}, {
                    v: v[k],
                    position: (j > 25 ? getCharCol(j) : String.fromCharCode(65 + j)) + (i + 1)
                }))).reduce((prev, next) => prev.concat(next)).forEach((v, i) => tmpdata[v.position] = {
                    v: v.v
                });
                


                var outputPos = Object.keys(tmpdata); //设置区域,比如表格从A1到D10
                console.log(tmpdata)
                tmpdata["B1"].s = { font: { sz: 14, bold: true, color: { rgb: "FFFFAA00" } }, fill: { bgColor: { indexed: 64 }, fgColor: { rgb: "FFFF00" } } };//<====设置xlsx单元格样式
                tmpdata["!merges"] = [{
                    s: { c: 1, r: 0 },
                    e: { c: 4, r: 0 }
                }];//<====合并单元格 
                var tmpWB = {
                    SheetNames: ['mySheet'], //保存的表标题
                    Sheets: {
                        'mySheet': Object.assign({},
                            tmpdata, //内容
                            {
                                '!ref': outputPos[0] + ':' + outputPos[outputPos.length - 1] //设置填充区域
                            })
                    }
                };
                console.log(XLSX.utils)
                tmpDown = new Blob([s2ab(XLSX.write(tmpWB,
                    { bookType: (type == undefined ? 'xlsx' : type), bookSST: false, type: 'binary' }//这里的数据是用来定义导出的格式类型
                ))], {
                        type: ""
                    });
                saveAs(tmpDown, "这里是下载的文件名" + '.' + (wopts.bookType == "biff2" ? "xls" : wopts.bookType));
            }
            function getCharCol(n) {
                let temCol = '',
                    s = '',
                    m = 0
                while (n > 0) {
                    m = n % 26 + 1
                    s = String.fromCharCode(m + 64) + s
                    n = (n - m) / 26
                }
                return s
            }
            function s2ab(s) {
                if (typeof ArrayBuffer !== 'undefined') {
                    var buf = new ArrayBuffer(s.length);
                    var view = new Uint8Array(buf);
                    for (var i = 0; i != s.length; ++i) view[i] = s.charCodeAt(i) & 0xFF;
                    return buf;
                } else {
                    var buf = new Array(s.length);
                    for (var i = 0; i != s.length; ++i) buf[i] = s.charCodeAt(i) & 0xFF;
                    return buf;
                }
            }
        </script>

    <!-- <script>

        var ViewModel = function() {
        /* use an array of arrays */
            this.aoa = ko.observableArray([
                [1,2],
                [3,4]
            ]);
            
        };


        // var UserInfos = [
        //         { id: 1, name: "张三", age: "21", aclass: "1801" },
        //         { id: 2, name: "李四", age: "22", aclass: "1802" },
        //         { id: 3, name: "王五", age: "23", aclass: "1803" }
        // ];
        // var ViewModel = {};
        // ViewModel = function ()
        // {
        //     this.aoa = ko.observableArray(UserInfos);               
        // }
            // ko.applyBindings(ViewModel); 
            





        var model = new ViewModel();
        ko.applyBindings(model);
        /* do an update to confirm KO was loaded properly */
        // model.aoa([[1,2,3],[4,5,6]]);
        // model.aoa.push([7,8,9]);
        // model.aoa([[1,2,3],[4,5,6]]);

        document.getElementById("export").onclick = function() {

            var aoa = [
                ['姓名', '性别', '年龄', '注册时间'],
                ['张三', null, null, new Date()],
                ['李四', '女', 22, new Date()]
            ];
            var sheet = XLSX.utils.aoa_to_sheet(aoa);
            console.log(sheet)
            // openDownloadDialog(sheet2blob(sheet), '导出.xlsx');







            /* get array of arrays */
            var data = model.aoa();
            /* convert to worksheet */
            var ws = XLSX.utils.aoa_to_sheet(aoa);
            /* build new workbook */
            var wb = XLSX.utils.book_new(); 
            XLSX.utils.book_append_sheet(wb, ws, "Sheet1");
            /* write file */
            XLSX.writeFile(wb, "knockout.xlsx")
        };
    </script> -->
</body>
</html>
慢半拍、
关注
  • 0
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
header导出excel文件
William-A
02-17 3587
之前一直都用PHPExcel导出excel文件，方便且强大。没有人提及的话，都根本不知道可以通过header设置报文首部字段来实现excel的导出。这段时间来，虽然说一直都在进步，但是还远远不够，对一些基础中的基础原理了解甚少，比方这次的HTTP原理。大学读的不是计算机专业，甚至跟计算机没哪怕一丁点系，这不是借口。现在要做的是安排好自己的时间，见缝插针地恶补计算机各种原理基础，只有牢固地掌握基础，才
如何使用JavaScript实现纯前端读取和导出excel文件
lgd1917的博客
01-12 1万+
js-xlsx 介绍 由SheetJS出品的js-xlsx是一款非常方便的只需要纯JS即可读取和导出excel的工具库，功能强大，支持格式众多，支持xls、xlsx、ods(一种OpenOffice专有表格文件格式)等十几种格式。本文全部都是以xlsx格式为例。 官方github：GitHub - SheetJS/sheetjs: SheetJS Community Edition -- Spreadsheet Data Toolkit 本文配套demo在线演示地址：JS读取和导出excel示例 本
前端开发之xlsx-js-style的使用和实例
最新发布
m0_50207524的博客
05-27 670
在使用xlsx组件的时候如果需要调整xlsx表的样式可以使用xlsx-js-style来进行设置。
xlsx.js 实现前端 table 数据导出并下载为 excel
热门推荐
一条菜鸟鱼的博客
04-13 1万+
xlsx.js 实现前端 table 数据导出并下载为 excel
NodeJS Excel文件 xls格式转xlsx文件格式
银滴子的博客
03-21 1362
思路：读取xls文件--》生成xlsx文件 import xlsx from 'xlsx'; /** * xls文件转化为xlsx * @param filepath */ export function transXlsForXLSX(filepath: string){ const workBook = xlsx.readFile(filepath); // console.log(workBook.SheetNames); const workbook_save = { .
js导出excel格式错误的问题
wangbingqi的专栏
05-11 6961
我使用的是bootstrap-table导出excel，在网页table中是没有问题的，导出excel后数字变成了科学技术，日期格式也不对，bootstrap-table的导出依赖tableExport.js文件，打开这个文件修改350行：     docData += '&lt;table&gt;&lt;thead&gt;';  修改为 ：         docData += '&lt;tab...
.Net 前端使用 xlsx.js 读取 Excel 日期格式的数据 与 Excel 文件中的数据不一致的问题
qq_30317889的博客
08-15 3311
由于项目中某些模块数据量比较大，上新系统时，或者数据批量更新时，若是每条数据都是收入录入会消费大量的人力和时间，所以这时候就需要“导入”功能，直接把数据整理为系统指定格式的 Excel 文档，直接导入系统，这样会很大程度上提高工作效率，缩短工作时间； 经多番查找，网上介绍 Excel 导入功能还是比较多，例如： 1.采用OleDB读取EXCEL文件； 2.引用的com组件：Microsoft.Of...
JS操作Excel：使用js-xlsx实现前端导出Excel文件
04-06
使用js-xlsx库实现前端导出Excel文件，首先要确保库已经被正确引入。通常，我们可以通过CDN链接在HTML文件中添加`<script>`标签来引入js-xlsx库，如以下代码所示： ```html <script src="https://cdnjs.cloudflare....
vue el-table前端 file-saver 导出excel可导出分页数据.zip
12-11
3. **生成Excel文件**：使用`xlsx-style`库（因为`file-saver`不支持直接生成Excel格式，而是CSV），将合并后的数据转换为Excel格式。首先安装`xlsx-style`： ```bash npm install xlsx-style # 或 yarn add ...
js-xlsx二次简单封装工具
11-24
5. **大数据量处理**: 对于大数据量的导出，由于浏览器性能限制，建议将数据处理和导出任务交给后端，前端只负责发送请求和展示结果。 **四、示例代码** ```javascript // 导入封装好的工具类 import XLSXExport ...
js-xlsx向excel添加image
09-06
需要注意的是，`js-xlsx`库本身并不支持直接导出到二进制格式（如.xlsx），因此通常需要借助`jszip.js`将工作簿转换为二进制数据流，再用`Blob`或`ArrayBuffer`等进行下载或存储。 在实际开发中，你可能会遇到一些...
xlsx.core.min.js，xlsx.js下载
11-28
xlsx.core.min.js，xlsx.js下载，参考下载地址https://cdn.bootcss.com/xlsx/0.12.7/xlsx.core.min.js
js-xlsx 包下载
03-16
纯前端利用 js-xlsx 实现 Excel 文件 xlsx.full.min.js引入到页面中
前端导出excel，可以控制样式，单元格合并居中等
09-08
4. 添加工作表：使用`XLSX.utils.json_to_sheet()`将数据转换为工作表，并使用`XLSX.utils.book_append_sheet()`添加到工作簿中。 5. 设置样式：利用`XLSX.utils.sheet_add_aoa()`或`XLSX.utils.sheet_add_json()`...
JS实现Excel导入以及table导出为Excel
qq_45308049的博客
02-05 3383
3.使用XLSX插件的XLSX.read()方法，将二进制字符串转换成excel文件的工作簿对象workbook（XLSX的具体使用方法请参考。4.通过XLSX.utils.sheet_to_json()方法，从workbook中获取第一张 Sheets表格数据并将其转换为json数据。2.通过XLSX插件的 XLSX.utils.book_new()方法，创建excel工作簿对象workbook。5.重组json数据生成数组，即是根据自己的定义的列字段名，重新组成符合自己需求的json数据。
前端导出表格，且带边框样式
github_38469586的博客
06-27 3889
背景： 我的项目用的是iview-admin2.0框架，里面将iview进行了升级，而且表格里用到了fiexd，对特殊的列进行了浮动。 需求是要求前端进行表格导出，而且要带边框。 用到了如下技术； import FileSaver from “file-saver”; import XLSX from “xlsx”; import xlsxStyle from “xlsx-style”; import XSU from “./xlsxStyle.utils”; ～～～～～～～～～～～～～～～～～～～～～～～
js实现导出Excel文档
孜然卷的博客
08-01 280
HTML、JavaScript实现导出Excel文档
xlsx.js读取、写、导出Excel
weixin_44812511的博客
02-22 2773
【代码】xlsx.js读取、写、导出Excel。
vue2 - 基于Export2Excel.js导出Excel案例（js-xlsx插件二次封装使用）
背心的博客
11-25 2790
vue2 - 基于Export2Excel.js导出Excel案例（js-xlsx插件二次封装使用）
vue从后端获取到数据后如何将数据导出为一张excel表
05-25
要将从后端获取到的数据导出为Excel表格，可以使用以下步骤： 1.将数据转换为Excel文件格式。可以使用第三方库如js-xlsx或exceljs等来实现。 2.将Excel文件下载到客户端。可以使用浏览器原生的下载功能或者使用FileSaver.js等第三方库来实现。 下面是一个简单的示例代码，使用js-xlsx和FileSaver.js来导出Excel表格： ```javascript import XLSX from 'xlsx'; import FileSaver from 'file-saver'; // 从后端获取数据 const data = [ { name: '张三', age: 20, gender: '男' }, { name: '李四', age: 25, gender: '女' }, { name: '王五', age: 30, gender: '男' }, ]; // 将数据转换为工作簿格式 const workbook = XLSX.utils.book_new(); const worksheet = XLSX.utils.json_to_sheet(data); XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1'); // 将工作簿转换为二进制文件流 const excelBuffer = XLSX.write(workbook, { bookType: 'xlsx', type: 'array' }); // 创建Blob对象并下载文件 const blob = new Blob([excelBuffer], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' }); FileSaver.saveAs(blob, 'data.xlsx'); ``` 注意：以上示例代码仅供参考，具体实现方式需要根据具体情况进行调整。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值