前台自己生成导出excel表

作者 : 开心源码 本文共1651个字,预计阅读时间需要5分钟 发布时间: 2022-05-13 共201人阅读

这篇文章有对excel的读取和导出,感觉写的蛮详细的,这里就不过多重复,讲一下里面没提到的点。

由于导出的excel里的表格宽度是固定很小的,不是自适应的,而后上面的文章里也没提到如何设置宽高,而后去文档看了下,找到了下面的配置项内容。

这一部分代码和文章里的一样。

    // 将一个sheet转成最终的excel文件的blob对象,而后利用URL.createObjectURL下载    function sheet2blob(sheet, sheetName) {        sheetName = sheetName || 'sheet1';        var workbook = {            SheetNames: [sheetName],            Sheets: {}        };        workbook.Sheets[sheetName] = sheet;        // 生成excel的配置项        var wopts = {            bookType: 'xlsx', // 要生成的文件类型            bookSST: false, // 能否生成Shared String Table,官方解释是,假如开启生成速度会下降,但在低版本IOS设施上有更好的兼容性            type: 'binary'        };        var wbout = XLSX.write(workbook, wopts);        var blob = new Blob([s2ab(wbout)], { type: "application/octet-stream" });        // 字符串转ArrayBuffer        function s2ab(s) {            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;        }        return blob;    }    function openDownloadDialog(url, saveName) {        if (typeof url == 'object' && url instanceof Blob) {            url = URL.createObjectURL(url); // 创立blob地址        }        var aLink = document.createElement('a');        aLink.href = url;        aLink.download = saveName || ''; // HTML5新添加的属性,指定保存文件名,可以不要后缀,注意,file:///模式下不会生效        var event;        if (window.MouseEvent) event = new MouseEvent('click');        else {            event = document.createEvent('MouseEvents');            event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);        }        aLink.dispatchEvent(event);    }

这一部分因需求而异的去配置吧

function daochu() {        let excel = [            ['姓名', '性别', '年龄'],            ['张三', '男', 18],            ['李四', '女', 22]        ];        let title = '导出excel表名';        let sheet = XLSX.utils.aoa_to_sheet(excel);        sheet['!merges'] = [            // 设置A1-C1的单元格合并            { s: { r: 0, c: 0 }, e: { r: 0, c: 3 } }        ];      //这里设置宽高        sheet["!cols"] = [            { wch: 20 },            { wch: 20 },            { wch: 20 },            { wch: 10 },        ];        sheet["!rows"] = [            { hpt: 25 },            { hpt: 20 },        ];        openDownloadDialog(sheet2blob(sheet), `${title}.xlsx`);}

但是这只是添加了固定的宽高而已,能用,但还不够好。
就需要下面的 protobi/js-xlsx去添加样式,但我还没用到这个,等日后需要的时候在说吧。

说明
1. 本站所有资源来源于用户上传和网络,如有侵权请邮件联系站长!
2. 分享目的仅供大家学习和交流,您必须在下载后24小时内删除!
3. 不得使用于非法商业用途,不得违反国家法律。否则后果自负!
4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
5. 如有链接无法下载、失效或广告,请联系管理员处理!
6. 本站资源售价只是摆设,本站源码仅提供给会员学习使用!
7. 如遇到加密压缩包,请使用360解压,如遇到无法解压的请联系管理员
开心源码网 » 前台自己生成导出excel表

发表回复