美酒没故事° 2022-11-18 16:56 采纳率: 37.8%
浏览 781
已结题

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

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

img

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

img

  • 写回答

2条回答 默认 最新

  • 美酒没故事° 2022-11-19 14: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月29日
  • 已采纳回答 11月21日
  • 创建了问题 11月18日

悬赏问题

  • ¥15 ecplise在连接数据库时显示加载驱动成功但是数据库连接失败
  • ¥15 visionmaster启动失败,提示为“机器不满足授权而被禁用”
  • ¥50 用logisim设计16位单时钟周期cpu
  • ¥15 IDEA中圈复杂度如何具体设置
  • ¥50 labview采集不了数据
  • ¥15 Multisim红外倒车雷达仿真中距离问题
  • ¥15 请上面代码做什么处理或什么混淆
  • ¥15 英雄联盟自定义房间置顶
  • ¥15 W5500网线插上无反应
  • ¥15 如何用字典的Key,显示在WPF的xaml中