首页 web前端 js教程 如何使用js-xlsx之合并单元格

如何使用js-xlsx之合并单元格

Mar 12, 2018 pm 03:02 PM
单元格 合并

这次给大家带来如何使用如何使用s-xlsx之合并单元格,使用s-xlsx之合并单元格的注意事项有哪些,下面就是实战案例,一起来看一下。

导入数据观察数据格式

1.1.我们先创建一个具有合并单元格的xlsx表格

就以表头数据合并示例吧:

1.png


示例

1.2.写个简单的数据导入功能(你可以参考前言中的文章编写,我就不放代码了)

导入xlsx参考数据格式:

示例

2.png

1.3.查看官网说明

3.png

官网示例(http://sheetjs.com/demos/modify.html):


官网示例

4.png

根据官网说明我们简单看出合并单元格的数据格式是:

........
data["!merges"] = [{
                s: {//s为开始
                    c: 1,//开始列
                    r: 0//可以看成开始行,实际是取值范围
                },
                e: {//e结束
                    c: 4,//结束列
                    r: 0//结束行
                }
            }];
........
登录后复制

2.动手实验

2.1.写个简单的导出demo

<!DOCTYPE html><html><head>
    <meta charset="UTF-8">
    <title></title></head><body>
    <script src="http://oss.sheetjs.com/js-xlsx/xlsx.full.min.js"></script>
    <!--调用FileSaver saveAs函数可以实现文件下载-->
    <!--<script src="http://sheetjs.com/demos/Blob.js"></script>
    <script src="http://sheetjs.com/demos/FileSaver.js"></script>-->
    <script>
        //如果使用 FileSaver.js 就不要同时使用以下函数
        function saveAs(obj, fileName) {//当然可以自定义简单的下载文件实现方式 
            var tmpa = document.createElement("a");
            tmpa.download = fileName || "下载";
            tmpa.href = URL.createObjectURL(obj); //绑定a标签
            tmpa.click(); //模拟点击实现下载
            setTimeout(function () { //延时释放
                URL.revokeObjectURL(obj); //用URL.revokeObjectURL()来释放这个object URL
            }, 100);
        }        var jsono = [{ //测试数据
            "id": 1,//A
            "合并的列头1": "数据11",//B
            "合并的列头2": "数据12",//C
            "合并的列头3": "数据13",//D
            "合并的列头4": "数据14",//E
        }, {            "id": 2,            "合并的列头1": "数据21",            "合并的列头2": "数据22",            "合并的列头3": "数据23",            "合并的列头4": "数据24",
        }];//....
        const wopts = { bookType: &#39;xlsx&#39;, bookSST: true, type: &#39;binary&#39; };//这里的数据是用来定义导出的格式类型 
        function downloadExl(data, type) {            var wb = { SheetNames: [&#39;Sheet1&#39;], Sheets: {}, Props: {} };            //wb.Sheets[&#39;Sheet1&#39;] = XLSX.utils.json_to_sheet(data);//通过json_to_sheet转成单页(Sheet)数据
            data = XLSX.utils.json_to_sheet(data); 
            data["B1"] = { t: "s", v: "asdad" };
            data["!merges"] = [{//合并第一行数据[B1,C1,D1,E1]
                s: {//s为开始
                    c: 1,//开始列
                    r: 0//开始取值范围
                },                e: {//e结束
                    c: 4,//结束列
                    r: 0//结束范围
                }
            }];
            wb.Sheets[&#39;Sheet1&#39;] = data;
            saveAs(new Blob([s2ab(XLSX.write(wb, wopts))], { type: "application/octet-stream"}), "这里是下载的文件名" + &#39;.&#39; + (wopts.bookType == "biff2" ? "xls" : wopts.bookType));
        }        function s2ab(s) {            if (typeof ArrayBuffer !== &#39;undefined&#39;) {                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;
            } else {                var buf = new Array(s.length);                for (var i = 0; i != s.length; ++i) buf[i] = s.charCodeAt(i) & 0xFF;                return buf;
            }
        }    </script>
    <button onclick="downloadExl(jsono)">导出</button></body></html>
登录后复制

相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!

相关阅读:

如何使用s-xlsx实现Excel 文件导入和导出(下)

如何使用s-xlsx实现Excel 文件导入和导出(上)

以上是如何使用js-xlsx之合并单元格的详细内容。更多信息请关注PHP中文网其他相关文章!

本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

Video Face Swap

Video Face Swap

使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸!

热工具

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

热门话题

Java教程
1657
14
CakePHP 教程
1415
52
Laravel 教程
1309
25
PHP教程
1257
29
C# 教程
1230
24
Excel 发现一个或多个公式引用存在问题:如何修复 Excel 发现一个或多个公式引用存在问题:如何修复 Apr 17, 2023 pm 06:58 PM

使用错误检查工具使用Excel电子表格查找错误的最快方法之一是使用错误检查工具。如果该工具发现任何错误,您可以更正它们并再次尝试保存文件。但是,该工具可能无法找到所有类型的错误。如果错误检查工具没有发现任何错误或修复它们不能解决问题,那么您需要尝试以下其他修复之一。要在Excel中使用错误检查工具:选择公式 选项卡。单击错误检查 工具。在发现错误时,有关错误原因的信息将出现在工具中。如果不需要,请修复错误或删除导致问题的公式。在错误检查工具中,单击下一步以查看下一个错误并重复该过程。当没

如何在 Google Sheets 中设置打印区域? 如何在 Google Sheets 中设置打印区域? May 08, 2023 pm 01:28 PM

如何在打印预览中设置GoogleSheets打印区域Google表格允许您使用三个不同的打印区域打印电子表格。您可以选择打印整个电子表格,包括您创建的每个单独的工作表。或者,您可以选择打印单个工作表。最后,您只能打印您选择的部分单元格。这是您可以创建的最小打印区域,因为理论上您可以选择单个单元格进行打印。最简单的设置方法是使用内置的Google表格打印预览菜单。您可以在PC、Mac或Chromebook上的网络浏览器中使用Google表格查看此内容。要设置Google

如何在 Excel 工作表中嵌入 PDF 文档 如何在 Excel 工作表中嵌入 PDF 文档 May 28, 2023 am 09:17 AM

通常需要将PDF文档插入Excel工作表。就像公司的项目列表一样,我们可以立即将文本和字符数据附加到Excel单元格中。但是,如果想将特定项目的解决方案设计附加到其相应的数据行怎么办?嗯,人们经常停下来思考。有时思考也不起作用,因为解决方案并不简单。深入研究这篇文章,了解如何轻松地将多个PDF文档插入Excel工作表,以及非常特定的数据行。示例场景在本文所示的示例中,我们有一个名为ProductCategory的列,它在每个单元格中列出了一个项目名称。另一列ProductSpeci

如何使用HTML、CSS和jQuery实现图片合并展示的高级功能 如何使用HTML、CSS和jQuery实现图片合并展示的高级功能 Oct 27, 2023 pm 04:36 PM

如何使用HTML、CSS和jQuery实现图片合并展示的高级功能概述:在网页设计中,图片展示是一个重要的环节,而图片合并展示是提高页面加载速度和提升用户体验的常用技巧之一。本文将介绍如何使用HTML、CSS和jQuery来实现图片合并展示的高级功能,并提供具体的代码示例。一、HTML布局:首先,我们需要在HTML中创建一个容器来展示合并后的图片。可以使用di

如何在 Excel 中创建随机数生成器 如何在 Excel 中创建随机数生成器 Apr 14, 2023 am 09:46 AM

如何使用 RANDBETWEEN 在 Excel 中生成随机数如果要生成特定范围内的随机数,RANDBETWEEN 函数是一种快速简便的方法。这允许您在您选择的任何两个值之间生成随机整数。使用 RANDBETWEEN 在 Excel 中生成随机数:单击您希望出现第一个随机数的单元格。键入=RANDBETWEEN(1,500)将“1”替换为您要生成的最低随机数,将“500”替换为

如何在Excel中使用SIGN函数判断数值的正负 如何在Excel中使用SIGN函数判断数值的正负 May 07, 2023 pm 10:37 PM

SIGN函数是MicrosoftExcel内置的一个非常有用的函数。使用此功能,您可以找出数字的符号。即,数字是否为正。如果数字为正,SIGN函数返回1,如果数字为负,则返回-1,如果数字为零,则返回零。虽然这听起来太明显了,但如果有一个包含许多数字的大列,并且我们想要找到所有数字的符号,那么使用SIGN函数并在几秒钟内完成工作非常有用。在本文中,我们通过3种不同的方法解释了如何在任何Excel文档中轻松使用SIGN函数来计算数字的符号。继续阅读,了解如何掌握这个很酷的技巧。启动

如何使用Java中的SequenceInputStream函数合并输入流 如何使用Java中的SequenceInputStream函数合并输入流 Jun 26, 2023 pm 03:03 PM

在Java开发中,我们常常需要合并多个输入流来处理数据。而SequenceInputStream函数就是Java中提供的用于合并输入流的函数之一,它可以将多个输入流合并成一个更大的输入流,方便我们进行数据处理。那么,如何使用Java中的SequenceInputStream函数来实现输入流的合并呢?接下来,本文将通过详细的步骤介绍其具体实现方法和注意事项。I

如何在C语言中合并两个数组? 如何在C语言中合并两个数组? Sep 10, 2023 am 09:05 AM

将两个数组作为输入,尝试合并或连接两个数组并将结果存储在第三个数组中。合并两个数组的逻辑如下所示-J=0,k=0for(i=0;i<o;i++){//mergingtwoarrays  if(a[j]<=b[k]){   c[i]=a[j];   j++;  }else{ &nbs

See all articles