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

阅读：评论：0
直接上案例，可以拿下去直接跑的
<!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="@2.12/lib/index.css" /><link href="C:UserstangdasourcereposVantVantceshi.css" rel="stylesheet" /><!-- 引入 Vue 和 Vant 的 JS 文件 --><script src="@2.6/dist/vue.min.js"></script><script src="@2.12/lib/vant.min.js"></script><script src=" 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=&#de" class="tabContentRow"><van-col span="12" class="tabContent">{{ de }}</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"><im="sendEmailList"rows="1"autosizelabel="邮箱"type="textarea"placeholder="多个邮箱用#号隔开" /></van-dialog><van-dialog v-model="remakeShow" title="备注" show-cancel-button :before-close="beforeCloseRemake"><im="remakeShowContent"rows="2"autosizelabel="备注"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.listitemlet 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 <= ; i++) {for (let row = wss.s.r+1; row <= ; row++) {//if (i ==1) {//    sheet2[de_cell({ r: row, c: i })].v = "";//} else {//    sheet2[de_cell({ r: row, c: i - 1 })].v = sheet2[de_cell({ r: row, c: i })].v//    sheet2[de_cell({ r: row, c: i })].v = ''//} sheet2[de_cell({ r: row, c: i - 1 })].v = sheet2[de_cell({ r: row, c: i })].vsheet2[de_cell({ r: row, c: i })].v = ''}}sheet2[de_cell({ r: 0, c: 0 })] = { t: 's', v: akeShowContent } XLSX.utils.book_append_sheet(workbook, sheet2, 'sheetName1');  var myDate = new Date;let workBookName = "扫描RFID数据-" + FullYear() + "-" + Month() + "-" + Date() + "-" + Hours() + "-" + Minutes() + "-" + Seconds() + ".xlsx"XLSX.writeFile(workbook, workBookName);akeShowContent = '';}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 <= ; c++) {//    var header = de_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[de_cell({ r: 0, c: 0 })] = { t: 's', v: akeShowContent }XLSX.utils.book_append_sheet(workbook, sheet2, 'sheetName1'); var myDate = new Date;let workBookName = "扫描条码数据-" + FullYear() + "-" + Month() + "-" + Date() + "-" + Hours() + "-" + Minutes() + "-" + Seconds() + ".xlsx"XLSX.writeFile(workbook, workBookName);akeShowContent = '';} },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 = falsevar errorEmail="" ;if (this.sendEmailList.length > 0) {var emailList = this.sendEmailList.split("#");for (var i = 0; i < emailList.length; i++) {if (!st(emailList[i])) {ischecktrue = trueerrorEmail += 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 (akeShowContent.length == 0) {vant.Toast('未填写任何备注文字');done(false);} else {vant.Toast('备注添加成功');done();} } else if (action === 'cancel') { // 取消akeShowContent = '';done(); }},sendEmail() {this.show = true;  },remakeData() {akeShow = 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>
本文发布于:2024-02-02 15:38:33，感谢您对本站的认可！
本文链接：https://www.4u4v.net/it/170685951444764.html
上一篇：git之修改上次提交备注
下一篇：SQLITE3 常用备注
标签：表头备注单元格 js sheet
留言与评论（共有 0 条评论）