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

前端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日

悬赏问题

  • ¥20 西门子S7-Graph,S7-300，梯形图
  • ¥50 用易语言http 访问不了网页
  • ¥50 safari浏览器fetch提交数据后数据丢失问题
  • ¥15 matlab不知道怎么改，求解答！！
  • ¥15 永磁直线电机的电流环pi调不出来
  • ¥15 用stata实现聚类的代码
  • ¥15 请问paddlehub能支持移动端开发吗？在Android studio上该如何部署？
  • ¥20 docker里部署springboot项目，访问不到扬声器
  • ¥15 netty整合springboot之后自动重连失效
  • ¥15 悬赏！微信开发者工具报错，求帮改