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

news/2024/7/21 5:38:47 标签: 前端, javascript, 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文件,但是它不能用来设置单元格。

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



http://www.niftyadmin.cn/n/5090129.html

相关文章

Leetcode 75——1768.交替合并字符串 解题思路与具体代码【C++】

一、题目描述与要求 1768. 交替合并字符串 - 力扣&#xff08;LeetCode&#xff09; 题目描述 给你两个字符串 word1 和 word2 。请你从 word1 开始&#xff0c;通过交替添加字母来合并字符串。如果一个字符串比另一个字符串长&#xff0c;就将多出来的字母追加到合并后字符…

STM32F4X OLED使用

STM32F4X OLED使用 OLED简介OLED使用OLED驱动芯片SSD1309引脚SSD1309通信协议4线SPI模式3线SPI模式I2C模式OLED地址确认 8080接口OLED 8080写模式OLED 8080读模式 6800接口 SSD1309显示原理SSD1309显存大小SSD1309显存分布SSD1039数据显示MCU操作SSD1309显存方法 OLED取模字符取…

vue2中render函数学习思维导图

vue2之renderjsx从细节入手&#xff0c;彻底掌握 父组件 .vue <template><div><myCom :msg"msg" :data-list"dataList" on-change"comChange" /></div> </template> <script> import myCom from ./render…

YOLO目标检测——跌倒摔倒数据集【含对应voc、coco和yolo三种格式标签】

实际项目应用&#xff1a;公共安全监控、智能家居、工业安全等活动区域无监管情况下的人员摔倒事故数据集说明&#xff1a;YOLO目标检测数据集&#xff0c;真实场景的高质量图片数据&#xff0c;数据场景丰富。使用lableimg标注软件标注&#xff0c;标注框质量高&#xff0c;含…

Integer和int 的区别

基本类型和封装类型 Integer 是基本数据类型 int 的封装类&#xff0c;在 Java 里面&#xff0c;有八种基本数据类型&#xff0c;他们都有一一对应的封装类型。基本类型和封装类型的区别有很多&#xff0c;比如&#xff1a; int 类型&#xff0c;我们可以直接定义一个变量名赋值…

latex伪代码书写进阶(2)

algorithm2e 是一个 LaTeX 宏包&#xff0c;用于在文档中编写算法和伪代码。以下是 algorithm2e 常见的语法和使用方式的示例&#xff1a; 引入 algorithm2e 宏包&#xff1a; \usepackage{algorithm2e}设置算法标题和标签&#xff1a; \begin{algorithm}[h]\caption{Algori…

【C语言】结构体、位段、枚举、联合(共用体)

结构体 结构&#xff1a;一些值的集合&#xff0c;这些值称为成员变量。结构体的每个成员可以是不同类型的变量&#xff1b; 结构体声明&#xff1a;struct是结构体关键字&#xff0c;结构体声明不能省略struct&#xff1b; 匿名结构体&#xff1a;只能在声明结构体的时候声…

MyBatis自定义映射resultMap,处理一对多,多对一

1、自定义映射resultMap 复习&#xff1a;查询的标签select必须设置属性resultType或resultMap&#xff0c;用于设置实体类和数据库表的映射 关系 resultType&#xff1a;自动映射&#xff0c;用于属性名和表中字段名一致的情况 &#xff08;或设置了下划线映射为驼峰&#x…