纯前端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文件,但是它不能用来设置单元格。

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

复制代码
相关推荐
jessezappy13 分钟前
jQuery-Word-Export 使用记录及完整修正文件下载 jquery.wordexport.js
前端·word·jquery·filesaver·word-export
旧林84340 分钟前
第八章 利用CSS制作导航菜单
前端·css
yngsqq1 小时前
c#使用高版本8.0步骤
java·前端·c#
Myli_ing1 小时前
考研倒计时-配色+1
前端·javascript·考研
余道各努力,千里自同风1 小时前
前端 vue 如何区分开发环境
前端·javascript·vue.js
PandaCave2 小时前
vue工程运行、构建、引用环境参数学习记录
javascript·vue.js·学习
软件小伟2 小时前
Vue3+element-plus 实现中英文切换(Vue-i18n组件的使用)
前端·javascript·vue.js
醉の虾2 小时前
Vue3 使用v-for 渲染列表数据后更新
前端·javascript·vue.js
张小小大智慧2 小时前
TypeScript 的发展与基本语法
前端·javascript·typescript
hummhumm2 小时前
第 22 章 - Go语言 测试与基准测试
java·大数据·开发语言·前端·python·golang·log4j