js sheet修改表头，合并单元格，添加备注，导出

最新推荐文章于 2023-08-21 17:30:41 发布
最新推荐文章于 2023-08-21 17:30:41 发布
阅读量1.8k 收藏 1
点赞数
分类专栏： 前端 文章标签： javascript vue.js 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/csdn18529124315/article/details/121945943
版权

直接上案例，可以拿下去直接跑的

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <!-- 引入样式文件 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@2.12/lib/index.css" />

    <link href="C:\Users\tangda\source\repos\Vant\Vant\ceshi.css" rel="stylesheet" />
    <!-- 引入 Vue 和 Vant 的 JS 文件 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6/dist/vue.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vant@2.12/lib/vant.min.js"></script>
    <script src=" http://47.119.154.126:8888/down/xXWXoEHmHMYE"></script>

</head>
<body>
    <div id="app">

        <van-tabs v-model="activeName">
            <van-tab title="条码" name="code" class="tab1" ref="tabref" :style="{height: tab1scrollerHeight}">
                <van-row class="tab1headerRow">
                    <van-col span="12" class="tab1header" style="">条码</van-col>
                    <van-col span="12" class="tab1header">数量</van-col>
                </van-row>
                <van-list v-model="listCode.loading" :finished="listCode.finished" finished-text="没有更多了" @load="onLoad">

                    <van-row v-for="item in listCode.listitem" :key="item" :title="item.code" class="tabContentRow">
                        <van-col span="12" class="tabContent">{{ item.code }}</van-col>
                        <van-col span="12" class="tabContent">{{ item.numbercount }}</van-col>
                    </van-row>

                </van-list>


            </van-tab>
            <van-tab title="RFID" name="RFID" class="tab2" :style="{height: tab2scrollerHeight}">
                <van-row type="flex" justify="space-around" class="tab2Row">
                    <van-col justify="center">
                        <van-button type="primary" size="small">开始扫描</van-button>
                    </van-col>
                    <van-col justify="center">
                        <van-button type="primary" size="small">关闭扫描</van-button>
                    </van-col>
                </van-row>
                <van-list v-model="list.loading" :finished="list.finished" finished-text="没有更多了" @load="onLoad" class="tab2Content">
                    <van-cell span="12" class="tab1header">RFID</van-cell>
                    <van-cell v-for="item in list.listitem" :key="item" :title="item.rfid" />
                </van-list>
            </van-tab>
        </van-tabs>

        <div class="foot" ref="ceshidemo">
            <van-row>
                <van-col>总数:{{listlengthnumber}}</van-col>
            </van-row>
            <van-row>
                <van-col span="8">  <van-button type="primary" v-on:click="exportData">导出</van-button></van-col>
                <van-col span="8">  <van-button type="primary" v-on:click="sendEmail">邮件</van-button></van-col>
                <van-col span="8">  <van-button type="primary" v-on:click="remakeData">备注</van-button></van-col>
            </van-row>
        </div>

        <van-dialog v-model="show" title="请输入邮箱" show-cancel-button :before-close="beforeClose">
            <van-field v-model.trim="sendEmailList"
                       rows="1"
                       autosize
                       label="邮箱"
                       type="textarea"
                       placeholder="多个邮箱用#号隔开" />
        </van-dialog>
        <van-dialog v-model="remakeShow" title="备注" show-cancel-button :before-close="beforeCloseRemake">
            <van-field v-model.trim="remakeShowContent"
                       rows="2"
                       autosize
                       label="备注"
                       type="textarea"
                       placeholder="请输入备注" />
        </van-dialog>
    </div>
   
    <script>
        //Vue.use(vant.List);
        //Vue.use(vant.Col);
        //Vue.use(vant.Row);
        const app = new Vue({
            el: "#app",
            data: {
                remakeShow: false,
                remakeShowContent:"",
                show: false,
                sendEmailList: '',
                activeName: 'code',
                list: {
                    loading: false,
                    finished: false,
                    listitem: [
                        { "id": "123456", "RFID": "20211211" },
                        { "id": "1234567",  "RFID": "202112117" },
                        { "id": "12345678", "RFID": "202112118" },
                        //{ "id": "123456", "rfid": "20211211" },
                        //{ "id": "1234567", "rfid": "202112117" },
                        //{ "id": "12345678", "rfid": "202112118" },
                        //{ "id": "123456", "rfid": "20211211" },
                        //{ "id": "1234567", "rfid": "202112117" },
                        //{ "id": "12345678", "rfid": "202112118" },
                        //{ "id": "123456", "rfid": "20211211" },
                        //{ "id": "1234567", "rfid": "202112117" },
                        //{ "id": "12345678", "rfid": "202112118" },
                        //{ "id": "123456", "rfid": "20211211" },
                        //{ "id": "1234567", "rfid": "202112117" },
                        //{ "id": "12345678", "rfid": "202112118" },
                        //{ "id": "123456", "rfid": "20211211" },
                        //{ "id": "1234567", "rfid": "202112117" },
                        //{ "id": "12345678", "rfid": "202112118" },
                        //{ "id": "123456", "rfid": "20211211" },
                        //{ "id": "1234567", "rfid": "202112117" },
                        //{ "id": "12345678", "rfid": "202112118" },
                        //{ "id": "123456", "rfid": "20211211" },
                        //{ "id": "1234567", "rfid": "202112117" },
                        //{ "id": "12345678", "rfid": "202112118" },
                        //{ "id": "123456", "rfid": "20211211" }
                    ]
                },
                listCode: {
                    loading: false,
                    finished: false,
                    listitem:
                        [
                            { "code": "20211211", "numbercount": "1" },
                            { "code": "20211211", "numbercount": "1" },
                            { "code": "20211211", "numbercount": "1" },
                            { "code": "20211211", "numbercount": "1" },
                            { "code": "20211211", "numbercount": "1" },
                            { "code": "20211211", "numbercount": "1" },
                            { "code": "20211211", "numbercount": "1" },
                            { "code": "20211211", "numbercount": "1" },
                            { "code": "20211211", "numbercount": "1" },
                            { "code": "20211211", "numbercount": "1" },
                            { "code": "20211211", "numbercount": "1" },
                            { "code": "20211211", "numbercount": "1" },
                            { "code": "20211211", "numbercount": "1" },
                            { "code": "20211211", "numbercount": "1" },
                            { "code": "20211211", "numbercount": "1" },
                            { "code": "20211211", "numbercount": "1" },
                            { "code": "20211211", "numbercount": "1" },
                            { "code": "20211211", "numbercount": "1" },
                            { "code": "20211211", "numbercount": "1" },
                            { "code": "20211211", "numbercount": "1" },
                            { "code": "20211211", "numbercount": "1" },
                            { "code": "20211211", "numbercount": "1" },
                            { "code": "20211211", "numbercount": "1" },
                            { "code": "20211211", "numbercount": "1" },
                            { "code": "20211211", "numbercount": "1" },
                            { "code": "20211211", "numbercount": "1" },
                            { "code": "20211211", "numbercount": "1" },
                            { "code": "20211211", "numbercount": "1" }
                        ]
                },
            },
            mounted: function () {


            },
            methods: {
                onLoad() {
                    if (this.activeName == 'RFID') {

                        this.list.listitem.push({ "id": "1234567899", "RFID": "202112118" })
                        if (this.list.listitem.length >= 50) {
                            this.list.finished = true;
                        }
                        this.list.loading = false;
                    }
                    else {
                        this.listCode.listitem.push({ "code": "20211214", "numbercount": "10" })

                        if (this.listCode.listitem.length >= 50) {
                            this.listCode.finished = true;
                        }
                        this.listCode.loading = false;
                    }
                },
                exportData() {
                    //1. 新建一个工作簿 
                    if (this.activeName == 'RFID') {
                        var workbook = XLSX.utils.book_new();
                        var listd = this.list.listitem
                        let sheet2 = XLSX.utils.json_to_sheet(listd, {
                            // 使用指定的单元格作为起点插入数据，r：行， c：列，详情看官网文档
                            origin: { r:1, c: 0 },// 从A1开始增加内容
});
                        sheet2["!cols"] = [
                            { wch: 30 }, 
                        ]; 
                        //获取 表格范围
                        let wss = XLSX.utils.decode_range(sheet2["!ref"])
                   
                        for (var i = wss.s.c+1; i <= wss.e.c; i++) {

                            for (let row = wss.s.r+1; row <= wss.e.r; row++) {
                                //if (i ==1) {
                                //    sheet2[XLSX.utils.encode_cell({ r: row, c: i })].v = "";
                                //} else {
                                //    sheet2[XLSX.utils.encode_cell({ r: row, c: i - 1 })].v = sheet2[XLSX.utils.encode_cell({ r: row, c: i })].v
                                //    sheet2[XLSX.utils.encode_cell({ r: row, c: i })].v = ''
                                //} 
                                sheet2[XLSX.utils.encode_cell({ r: row, c: i - 1 })].v = sheet2[XLSX.utils.encode_cell({ r: row, c: i })].v
                                sheet2[XLSX.utils.encode_cell({ r: row, c: i })].v = ''
                            }

                        }
                        sheet2[XLSX.utils.encode_cell({ r: 0, c: 0 })] = { t: 's', v: this.remakeShowContent } 
                        XLSX.utils.book_append_sheet(workbook, sheet2, 'sheetName1');  
                        var myDate = new Date;
                        let workBookName = "扫描RFID数据-" + myDate.getFullYear() + "-" + myDate.getMonth() + "-" + myDate.getDate() + "-" + myDate.getHours() + "-" + myDate.getMinutes() + "-" + myDate.getSeconds() + ".xlsx"
                        XLSX.writeFile(workbook, workBookName);
                        this.remakeShowContent = '';
                    }
                    else {
                        var workbook = XLSX.utils.book_new();
                        var codeData= JSON.parse(JSON.stringify(this.listCode.listitem).replace(/numbercount/g, "数量").replace(/code/g, "条码"))
                        let sheet2 = XLSX.utils.json_to_sheet(codeData, {  origin: { r:1, c:0 } });
                        sheet2["!cols"] = [
                            { wch: 30 },
                            { wch: 30 },
                        ]; 
                        //let wss = XLSX.utils.decode_range(sheet2["!ref"])
                        //var titles = {
                        //    code: '条码',  
                        //    numbercount: '数量'
                        //}
                        //for (let c = wss.s.c; c <= wss.e.c; c++) {
                        //    var header = XLSX.utils.encode_col(c) + '2'
                        //    sheet2[header].v = titles[sheet2[header].v]
                        //}
                        var merge = [
                            { s: { r: 0, c: 0 }, e: { r: 0, c: 1 } }, 
                        ];
                        sheet2['!merges'] = merge;
                        sheet2[XLSX.utils.encode_cell({ r: 0, c: 0 })] = { t: 's', v: this.remakeShowContent }
                        XLSX.utils.book_append_sheet(workbook, sheet2, 'sheetName1'); 
                        var myDate = new Date;
                        let workBookName = "扫描条码数据-" + myDate.getFullYear() + "-" + myDate.getMonth() + "-" + myDate.getDate() + "-" + myDate.getHours() + "-" + myDate.getMinutes() + "-" + myDate.getSeconds() + ".xlsx"
                        XLSX.writeFile(workbook, workBookName);
                        this.remakeShowContent = '';
                    } 
                },
           
                beforeClose: function (action, done) { // 点击事件 - 备注按钮提示框
                    if (action === 'confirm') { // 确认
                        var reg = new RegExp("^[a-z0-9]+([._\\-]*[a-z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$"); //正则表达式
                        var ischecktrue = false
                        var errorEmail="" ;
                        if (this.sendEmailList.length > 0) {
                            var emailList = this.sendEmailList.split("#");
                            for (var i = 0; i < emailList.length; i++) {
                                if (!reg.test(emailList[i])) {
                                    ischecktrue = true
                                    errorEmail += i + 1 + ","
                                }
                            } 
                            if (ischecktrue) {
                                vant.Toast('第' + errorEmail.substr(0, errorEmail.length-1) + '个邮箱格式有误！请检查');
                                done(false)
                            } else {
                                if (true) {

                                }
                                vant.Toast('邮件发送成功');
                                done(); // 关闭提示框
                            }

                        } else {
                            if (this.sendEmailList.length==0) {
                                vant.Toast('请输入邮箱');
                                done(false)
                            }
                        }
                        
                    } else if (action === 'cancel') { // 取消
                        this.sendEmailList=[]
                        done(); // 关闭提示框
                    }
                }, 
                beforeCloseRemake: function (action, done) {
                    if (action === 'confirm') { // 确认
                        if (this.remakeShowContent.length == 0) {
                            vant.Toast('未填写任何备注文字');
                            done(false);
                        } else {
                            vant.Toast('备注添加成功');
                            done();
                        } 
                    } else if (action === 'cancel') { // 取消
                        this.remakeShowContent = '';
                        done(); 
                    }
                },
                sendEmail() {
                    this.show = true;  
                },
                remakeData() {
                    this.remakeShow = true;
                }
            },
            computed: {
                'listlengthnumber': function () {
                    if (this.activeName == 'RFID') {
                        return this.list.listitem.length;
                    }
                    else {
                        return this.listCode.listitem.length;
                    }
                },
                tab2scrollerHeight: function () {
                    return (window.innerHeight - 44 - 65 - 10) + 'px';
                },
                tab1scrollerHeight: function () {
                    return (window.innerHeight - 44 - 65 - 10) + 'px';
                }
            },


        })
    </script>

</body>
</html>
csdn18529124315
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
sheetjs js-xlsx
02-16
公司网络限制不能github下载，上传这里中转下，大家可以从官网下载
实现SheetJS读取excel表格数据并将表头中文转英文
alonelone的博客
04-12 733
excel中的数据批量导入的时候，针对表头做验证和中英文转换
datagridview 纵向 横向 合并单元格_SheetJS（js-xlsx、XLSX）横向纵向合并单元格
weixin_39637386的博客
01-19 302
安装使用：https://github.com/sheetjs/sheetjs#installation​github.comimport XLSX from 'xlsx'; // ... // xlsxData 是 Excel 的内容 const workSheet = XLSX.utils.aoa_to_sheet(xlsxData); const workbook = XLSX.utils....
基于 SheetJS 的前端合并单元格复杂表头导入
qq_43600513的博客
04-23 1737
顶部为基于 antdv 的 table 组件的复现效果。复现 Excel 表格中，合并完单元格后的效果。table 组件用到的 columns 配置，及 dataSource 数据，均由解析函数一并返回。无需要开发者二次开发及维护。底部为解析函数解析后返回的三个数据结果。分别为解析后的 antdv columns 表格列的配置项，直接传递给 table 组件的 columns 属性使用。
合并单元格好JS
12-30
合并单元格好JS，特别适用与动态生成表格的单元格合并，报表开发
easyuiPoi导出Excel工具类封装（支持合并单元格）
09-20
EasyUIPoI是一款基于Apache POI的Java工具库，专门用于简化Excel的导出操作，尤其在处理模板和合并单元格方面提供了便利。这个库主要适用于那些需要在Web应用中生成Excel报告或导出数据的场景，比如数据分析、报表...
Excel报表导出，复杂Excel模板导出（带单元格合并），jxls2
09-12
本项目专注于解决这一问题，通过使用`jxls2`库，能够实现复杂Excel模板的导出，包括单元格的合并，满足多种报表导出需求。现在我们将详细探讨这个项目的核心技术和应用场景。 首先，`jxls2`是一个强大的Java库，它...
前端导出excel，可以控制样式，单元格合并居中等
09-08
通过"xlsx.full.min.js"这个库，我们可以实现前端直接导出带有样式的Excel文件，包括单元格的合并和居中对齐等高级功能。下面将详细介绍这个过程及涉及到的技术要点。 一、xlsx.full.min.js库介绍 "xlsx.full.min....
合并单元格导出数据到excel.rar
08-15
本案例中，"合并单元格导出数据到excel.rar"是一个压缩包，包含了一个Java代码示例，它实现了从数据库查询数据后，利用Apache POI库来生成包含合并单元格的Excel文件。以下是关于这个主题的详细知识点： 1. **Java...
VUE导出Excel，两种方法，方法二带样式：文字居中，自动换行，列宽设置，单元格合并，冻结表头等
03-29
在标题提到的两种方法中，我们将重点讨论如何利用SheetJS和xlsx-style库来实现更复杂的Excel导出功能，如文字居中、自动换行、列宽设置、单元格合并以及冻结表头。 SheetJS是一个强大的JavaScript库，它允许开发者...
sheetJS 离线操作excel
08-14
离线上传Excel 文件 并在浏览器中解析文件， 减少与服务器之间得交互
sheetjs:创建和操作CSSStyleDeclarations
05-01
SheetJS 使用javascript轻松创建和操作CSSStyleDeclarations ： import { StyleSheet } from 'sheetjs' ; // or const { StyleSheet } = window . sheetjs ; const styleSheet = new StyleSheet ( ) ; const s = styleSheet . stylesForSelector ; // changes background color for all current and future matching elements s ( '#content .my-selector' ) . backgroundColor = 'green' ; 当您需要动态样式的元素数量众多时，这非常有用。 jQuery .css（）与SheetJ
基于SheetJS以及XLSXStyle的纯前端带样式导出表格为Excel的工具包
08-12
基于SheetJS以及XLSX-Style的纯前端带样式导出表格为Excel的工具包
ExcelJS 合并表头,合并单元格,一sheet多表格
最新发布
liurui0204的博客
08-21 2828
【代码】ExcelJS 合并表头,合并单元格,一sheet多表格。
sheetJS中合并单元格用首格数据填充
llsixly
03-30 612
保存的表格的单元格合并情况，数据是一个Range，即{起始点坐标,结束点坐标}。：编码单元格，将坐标装换为Excel坐标。
SheetJS/js-xlsx修改表头实例操作
csdn18529124315的博客
12-11 3428
SheetJS/js-xlsx修改表头实例操作
JS导出合并行数据excel(js-xlsx)
Benxiaohai_311的博客
08-10 3550
需求：能够根据后端给的数据，导出excel，并且相同车辆合并单元格。
前端知识分享——SheetJS 用法体验
热门推荐
sinat_43095140的博客
01-26 1万+
前端知识分享——SheetJS 用法体验 Write and share what I see and hear 使用SheetJS导出 Excel 表格 最近遇到一个很好用的前端导出Excel 表格的工具 – SheetJS 官方地址 github地址 官方提供了多种版本，自己做点小demo可以使用社区免费版本 使用方法 具体使用方法在官方文档中有很详细的说明，这里举个例子 安装 npm install xlsx 引入 import xlsx from 'xlsx' 使用 // 1. 创建一个工
Vue - SheetJS | XLS sheet_to_json() 方法解析 Excel 时跳过表格大标题，如何不解析表格的第一行（屏蔽excel表格的首行标题，自定义设置从第几行开始读取）
王佳斌
01-06 6603
vue，sheet，解析excel xls表格，vue使用sheet.js读取excel文件时设置从第几行开始读取，vue sheet插件如何避免读取首行大标题，sheet_to_json函数怎么读取指定行数，sheet_to_json()不解析前几行（跳过前几行），sheet_to_json()方法解析Excel时不解析表格标题（表格第一行或N行），让xls不解析excel文件大标题，sheet_to_json()方法如何不解析excel首行（第一行），SheetJS不解析电子表格excel第一行标题部分
easyexcel合并单元格导出
05-31
EasyExcel 是一款使用简单、效率高的 Java Excel 操作工具。EasyExcel 提供了两种合并单元格的方法：自动合并和手动合并。 1. 自动合并 EasyExcel 在写入 Excel 文件时，会自动识别需要合并的单元格，并将其合并。这种方式适用于需要合并的单元格比较规律的情况，比如表头或者某些固定格式的表格。 2. 手动合并 手动合并单元格需要使用 `Sheet` 类中的 `merge` 方法，传入合并的起始行、起始列、结束行、结束列即可手动合并单元格。 以下是一个示例代码： ```java // 创建 ExcelWriter 对象 String filePath = "output.xlsx"; ExcelWriter excelWriter = new ExcelWriter(filePath); // 创建 Sheet 对象 Sheet sheet = new Sheet(1, 0); // 设置表头 List<List<String>> head = new ArrayList<>(); head.add(Arrays.asList("姓名", "年龄", "性别")); sheet.setHead(head); // 设置数据 List<List<Object>> data = new ArrayList<>(); data.add(Arrays.asList("张三", 20, "男")); data.add(Arrays.asList("李四", 25, "女")); data.add(Arrays.asList("王五", 30, "男")); sheet.setClazz(List.class); sheet.setAutoWidth(Boolean.TRUE); sheet.setDataList(data); // 手动合并单元格 sheet.merge(0, 0, 0, 2); // 将数据写入 Excel 文件 excelWriter.write1(Collections.singletonList(sheet), null); // 关闭 ExcelWriter excelWriter.finish(); ``` 在上面的示例代码中，我们首先创建了一个 ExcelWriter 对象，并指定了需要写入的 Excel 文件路径。接着，我们创建了一个 Sheet 对象，并设置了表头和数据。最后，我们使用 Sheet 对象的 merge 方法来手动合并单元格，将第一行的三个单元格合并为一个单元格。最终，我们将数据写入 Excel 文件并关闭 ExcelWriter 对象。 需要注意的是，手动合并单元格时，需要在写入数据之前进行合并。如果在写入数据之后再进行合并，EasyExcel 无法识别需要合并的单元格。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值