美酒没故事° 2022-11-18 08:56 采纳率: 34.4%
浏览 881
已结题

前端xlsx插件怎么设置导出的excel列宽自适应?

如果表头长的话,就按照表头的宽度撑开:

img

如果表体数据长的话,就按照数据的宽度撑开:

img

  • 写回答

2条回答 默认 最新

  • 美酒没故事° 2022-11-19 06:36
    关注

    弄出来了,记录下:

    img

    <!doctype html>
    <html lang="en">
        <head>
            <meta charset="UTF-8">
            <meta name="viewport"
                content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
            <meta http-equiv="X-UA-Compatible" content="ie=edge">
            <script src="https://unpkg.com/xlsx/dist/xlsx.full.min.js"></script>
            <title>json to excel</title>
        </head>
        <body>
            <button onclick="toExcel()">导出</button>
    
            <script>
                function toExcel() {
                    const excel = XLSX.utils.book_new();
                    const demo = [{
                            "IMEI(设备编号)": "86482351421321111",
                            设备名称: "饭少吃",
                            设备类型: "空开",
                            设备型号: "ML-200",
                            NB卡号: "32113213",
                            批次号: "11113333111",
                            出厂编号: "4213231231215431",
                            出厂日期是发哈是开放的粉红色: "2020-01-22 12:44:10",
                            产品标识: "7665323144642124",
                            设备密钥: "cc76w454321a2674j3g65",
                        },
                        {
                            "IMEI(设备编号)": "86482351422131231321111",
                            设备名称: "上点饭",
                            设备类型: "电能表",
                            设备型号: "ML-2100",
                            NB卡号: "323213",
                            批次号: "111133763433444441153531",
                            出厂编号: "215431",
                            出厂日期是发哈是开放的粉红色: "2020-01-22 12:44:10",
                            产品标识: "7665323144642124",
                            设备密钥: "cc76w45432142312312312312312312a2674j3g65",
                        },
                        {
                            "IMEI(设备编号)": "1231321111",
                            设备名称: "粉丝地方撒",
                            设备类型: "空开",
                            设备型号: "ML-200",
                            NB卡号: "3213213213",
                            批次号: "1111333344444111",
                            出厂编号: "21543881",
                            出厂日期是发哈是开放的粉红色: "2020-01-22 12:44:10",
                            产品标识: "766534642124",
                            设备密钥: "cc76w45432142312312312a2674j3g65",
                        },
                    ];
    
                    let data = XLSX.utils.json_to_sheet(demo, {
                        // origin: "A2", // 设置插入位置
                    });
                    // 表头的样式
                    data["A1"].s = {
                        font: {
                            bold: true,
                        },
                        alignment: {
                            horizontal: "center",
                            vertical: "center",
                        },
                    };
    
    
    
                    // 合并单元格     s: 起始位置,   e: 结束位置,   r: 行,   c: 列
                    // data["!merges"] = [{ s: { r: 0, c: 0 }, e: { r: 0, c: 10 } }];
                    //  设置列宽
                    // data["!cols"] = [{ wch: 50 }, { wch: 20 }, { wch: 40 }];
    
                    // 1.所有表头的宽度
                    const headsWidth = Object.keys(demo[0]).map((value) => {
                        if (/.*[\u4e00-\u9fa5]+.*$/.test(value)) {
                            return parseFloat(value.toString().length * 2.1);
                        } else {
                            return parseFloat(value.toString().length * 1.1)
                        }
                    });
                    // console.log("所有表头的宽度:", headsWidth);
    
                    // 2.所有表体值的宽度
                    const rowsWidth = demo.map((item) => {
                        // 每行数据中值的宽度
                        const maxValue = Object.values(item).map((value, index) => {
                            let valueWidth;
                            if (/.*[\u4e00-\u9fa5]+.*$/.test(value)) {
                                valueWidth = parseFloat(value.toString().length * 2.1);
                            } else {
                                valueWidth = parseFloat(value.toString().length * 1.1);
                            }
                            // console.log("每行数据中值的宽度:", valueWidth);
    
                            // 对比出表头和表体值的最大数
                            return Math.max(valueWidth, headsWidth[index]);
                        });
                        // console.log("本行值中最大宽度:", maxValue);
                        return maxValue;
                    })
                    // console.log("每行数据对比出的最大宽度:", rowsWidth);
    
                    // 3.对比每列最大值
                    let aotuWidth = []
                    rowsWidth.map((row, index) => {
                        let maxWidth = [];
                        row.map((value, i) => {
                            if (index === 0) {
                                maxWidth.push({
                                    wch: value
                                });
                            } else {
                                maxWidth.push({
                                    wch: Math.max(value, aotuWidth[i].wch)
                                })
                            }
                        })
                        console.log("最大值:", maxWidth);
                        aotuWidth = maxWidth;
                    });
                    // console.log("每列最大宽度:", aotuWidth);
    
                    // 4.给excel设置自适应宽度
                    data["!cols"] = aotuWidth;
    
    
    
    
    
                    XLSX.utils.book_append_sheet(excel, data);
                    XLSX.writeFile(excel, "空开填写模板.xlsx");
                }
            </script>
        </body>
    </html>
    

    展开全部

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(1条)
编辑
预览

报告相同问题?

问题事件

  • 系统已结题 11月28日
  • 已采纳回答 11月21日
  • 创建了问题 11月18日

悬赏问题

  • ¥15 全志t113i启动qt应用程序提示internal error
  • ¥15 ensp可以看看嘛.
  • ¥80 51单片机C语言代码解决单片机为AT89C52是清翔单片机
  • ¥60 优博讯DT50高通安卓11系统刷完机自动进去fastboot模式
  • ¥15 minist数字识别
  • ¥15 在安装gym库的pygame时遇到问题,不知道如何解决
  • ¥20 uniapp中的webview 使用的是本地的vue页面,在模拟器上显示无法打开
  • ¥15 网上下载的3DMAX模型,不显示贴图怎么办
  • ¥15 关于#stm32#的问题:寻找一块开发版,作为智能化割草机的控制模块和树莓派主板相连,要求:最低可控制 3 个电机(两个驱动电机,1 个割草电机),其次可以与树莓派主板相连电机照片如下:
  • ¥15 潜在扩散模型的Unet特征提取
手机看
程序员都在用的中文IT技术交流社区

程序员都在用的中文IT技术交流社区

专业的中文 IT 技术社区,与千万技术人共成长

专业的中文 IT 技术社区,与千万技术人共成长

关注【CSDN】视频号,行业资讯、技术分享精彩不断,直播好礼送不停!

关注【CSDN】视频号,行业资讯、技术分享精彩不断,直播好礼送不停!

客服 返回
顶部