• 纯前端js中使用sheetjs导出excel,并且合并标题


    先定义变量----用的是Vue2 ,以下在vue的data:{}中定义--------------
     			//空格占位符 ''
                headerTopTitle: ['患者信息', '', '', '', '', '', '', '', '', '入出院信息', '', '', '', '', '', '', '病案首页中的出院主要诊断', '',
                    '出院其他诊断(病案首页中原始信息)', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '手术记录(病案首页中原始信息)', ''],
                headerTitle: ['患者姓名', '性别', '年龄', '民族', '出生日期', '身份证号', '联系人姓名', '联系人电话', '主要医疗付费方式', '住院号', '入院途径', '住院日期', '出院日期',
                    '住院天数', '离院方式', '住院总费用', '主要诊断名称', '主要诊断编码', '其他诊断名称1', '其他诊断编码1', '其他诊断名称2', '其他诊断编码2', '其他诊断名称3', '其他诊断编码3',
                    '其他诊断名称4', '其他诊断编码4',
                    '其他诊断名称5', '其他诊断编码5', '其他诊断名称6', '其他诊断编码6', '其他诊断名称7', '其他诊断编码7', '其他诊断名称8', '其他诊断编码8',
                    '其他诊断名称9', '其他诊断编码9', '其他诊断名称10', '其他诊断编码10', '其他诊断名称11', '其他诊断编码11', '其他诊断名称12', '其他诊断编码12', '其他诊断名称13', '其他诊断编码13',
                    '其他诊断名称14', '其他诊断编码14', '其他诊断名称15', '其他诊断编码15', '手术及操作名称1', '手术及操作编码1', '手术日期1', '手术及操作名称2', '手术及操作编码2', '手术日期2',
                    '手术及操作名称3', '手术及操作编码3', '手术日期3', '手术及操作名称4', '手术及操作编码4', '手术日期4', '手术及操作名称5', '手术及操作编码5', '手术日期5', '手术及操作名称6',
                    '手术及操作编码6', '手术日期6'],
                merges: [
                    {s: {c: 0, r: 0}, e: {c: 8, r: 0}}, //合并第一行 第1个至第3个
                    {s: {c: 9, r: 0}, e: {c: 15, r: 0}},// 合并第一行  第9个至第15个
                    {s: {c: 16, r: 0}, e: {c: 17, r: 0}},// 合并第一行  第4个至第6个
                    {s: {c: 18, r: 0}, e: {c: 47, r: 0}},// 合并第一行  第4个至第6个
                    {s: {c: 48, r: 0}, e: {c: 65, r: 0}},// 合并第一行  第4个至第6个
                ],
                cols: [{wch: 15}, {wch: 10}, {wch: 10}, {wch: 20}, {wch: 20}, {wch: 20}, {wch: 15}, {wch: 15}, {wch: 20},
                    {wch: 15}, {wch: 10}, {wch: 15}, {wch: 15}, {wch: 10},
                    {wch: 12}, {wch: 12}, {wch: 12}],
                rows: [{hpx: 35}, {hpx: 35}],
                fileName: "卒中患者.",
                alignment: {//对齐方式
                    horizontal: 'center',  //水平居中
                    vertical: 'center',     //竖直居中
                    wrapText: true,       //自动换行
                },
                font: {
                    bold: false,
                    sz: 12,
                },
               
    ----------------以下为方法---------------
    /**
                 * @Description: 执行下载excle文件
                 * 
                 */
                downingExcel() {
                 //每个合并的开始位置,也就是s的c位置要有数据
                    let headers = [me.data.headerTopTitle,me.data.headerTitle]
                    let data = [
                        {"患者姓名": "John", "性别": "Seattle"},
    					{"患者姓名": "John", "性别": "Seattle"},
                    ];
                    exportXslxExcel(me.data.merges, me.data.cols, me.data.rows, data, headers, me.data.fileName, me.data.alignment, me.data.font)
                },
    
    
    
    function s2ab(s) {
    
        //如果存在ArrayBuffer对象(es6) 最好采用该对象
        if (typeof ArrayBuffer !== 'undefined') {
    
            //1、创建一个字节长度为s.length的内存区域
            var buf = new ArrayBuffer(s.length);
    
            //2、创建一个指向buf的Unit8视图,开始于字节0,直到缓冲区的末尾
            var view = new Uint8Array(buf);
    
            //3、返回指定位置的字符的Unicode编码
            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;
        }
    }
    
    //dukang  下载excel
    function exportXslxExcel(merges, cols, rows, data, headers, fileName, alignment, font) {
        const ws = XLSX.utils.book_new();
        //datamerges 数组表示对行和列进行合并,c表示column(列),r表示row(行),s表示start(开始),e表示end(结束),索引从0开始
        ws["!merges"] = merges;
        // 设置列宽行高
        ws['!cols'] = cols; // 将cols添加到sheet中
        ws['!rows'] = rows; // 将rows添加到sheet中,设置行高
        XLSX.utils.sheet_add_aoa(ws, headers);
         XLSX.utils.sheet_add_json(ws, data, {
                origin: 'A' + (headers.length + 1),
                skipHeader: true
            }
        );
        //这里遍历单元格给单元格对象设置属性,s为控制样式的属性
        Object.keys(ws).forEach((key) => {
            if (key.indexOf('!') < 0) {
                //只对标题行操作 第一行标题 和第二行标题
                if (key.indexOf('1') !== -1 || key.indexOf('2') !== -1) {
                    ws[key].s = {
                        alignment: alignment,
                    }
                    ws[key].s.font = {
                        font: font
                    }
                }
    
            }
        })
        let workBook = {
            SheetNames: ['Sheet1'],
            Sheets: {'Sheet1': ws},
            Props: {}
        };
        
        let wopts = {
            bookType: 'xlsx',
            bookSST: false,
            type: 'binary',
        };
        saveAs(new Blob([s2ab(XLSX.write(workBook, wopts))], {type: "application/octet-stream"}), fileName + (wopts.bookType == "biff2" ? "xls" : wopts.bookType));
        //xlsx.full.min.js 是一个完整的js库,它可以用来读取和写入Excel文件,但是它不能用来设置单元格。
    
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
    • 68
    • 69
    • 70
    • 71
    • 72
    • 73
    • 74
    • 75
    • 76
    • 77
    • 78
    • 79
    • 80
    • 81
    • 82
    • 83
    • 84
    • 85
    • 86
    • 87
    • 88
    • 89
    • 90
    • 91
    • 92
    • 93
    • 94
    • 95
    • 96
    • 97
    • 98
    • 99
    • 100
    • 101
    • 102
    • 103
    • 104
    • 105
    • 106
    • 107
    • 108
    • 109
    • 110
    • 111
    • 112
    • 113
    • 114
    • 115
    • 116

    ---------------------结束-------------------

    
    
    • 1
  • 相关阅读:
    Flutter状态管理-FlyingRedux
    【云原生】Docker可视化监控管理工具使用
    查询快递单号物流,导出详情物流到表格
    介绍BootLoader、PM、kernel和系统开机的总体流程
    .net wpf程序 移花接木
    使用Python分析14亿条数据
    PTE阶段规划
    【组原课设团队任务】FlyBird+FPGA+RISCV
    SQL学习(CTFhub)整数型注入,字符型注入,报错注入 -----手工注入+ sqlmap注入
    活动sql语句索引基本优化
  • 原文地址:https://blog.csdn.net/weixin_42960380/article/details/133829899