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

clike 复制代码
先定义变量----用的是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 小时前
Trae分析Phaser.js游戏《洋葱头捡星星》
前端·游戏开发·trae
朝阳5812 小时前
在浏览器端使用 xml2js 遇到的报错及解决方法
前端
GIS之路2 小时前
GeoTools 读取影像元数据
前端
ssshooter3 小时前
VSCode 自带的 TS 版本可能跟项目TS 版本不一样
前端·面试·typescript
你的人类朋友3 小时前
【Node.js】什么是Node.js
javascript·后端·node.js
Jerry3 小时前
Jetpack Compose 中的状态
前端
dae bal4 小时前
关于RSA和AES加密
前端·vue.js
柳杉4 小时前
使用three.js搭建3d隧道监测-2
前端·javascript·数据可视化
lynn8570_blog4 小时前
低端设备加载webp ANR
前端·算法
LKAI.5 小时前
传统方式部署(RuoYi-Cloud)微服务
java·linux·前端·后端·微服务·node.js·ruoyi