吃亏了的程序猿 2023-04-10 16:43 采纳率: 40%
浏览 20

问题全部代码前端一个id就可以了答案对了的话可以去我另外那个拿奖励


exportExcel: function () {
            var wb = XLSX.utils.table_to_sheet(document.querySelector("#mytable"), {raw: true});//mytable为表格的id名
            console.log(wb)

            for (var i = 0; i < 12; i++) {
                wb["!cols"][i] = {wpx: 100}
            }
            for (const key in wb) {
                if (key.indexOf('!') === -1) {
                    wb[key].s = {
                        font: {// 字体设置
                            sz: 13,
                            bold: false,
                            color: {
                                rgb: '000000'// 十六进制,不带#
                            }
                        },
                        border: { // 设置边框
                            top: {style: 'thin'},
                            bottom: {style: 'thin'},
                            left: {style: 'thin'},
                            right: {style: 'thin'}
                        },
                        alignment: {// 文字居中 //字体水平居中、垂直居中、自动换行
                            horizontal: 'center',
                            vertical: 'center',
                            wrap_text: true
                        }
                    }
                    // console.log(wb[key].s)
                }
            }
            console.log(wb)
            let date = this.sheet2blob(wb)
            let data = new Date();
            let startTime = data.getFullYear() + '年' + (data.getMonth() + 1) + '月' + data.getDate() + '日' + data.getHours() + '时' + data.getMinutes() + '分' + data.getSeconds();
            try {
                window.saveAs(
                    // Blob 对象表示一个不可变、原始数据的类文件对象
                    // Blob 表示的不一定是js的原生格式数据
                    // File 接口基于Blob,
                    // 返回一个新创建的Blob对象,其内容由参数中给定的数组串联
                    new Blob([date], {type: "application/octet-stream"}),
                    // 导出文件名称
                     startTime + '.xlsx'
                );
            } catch (e) {
                // 捕捉报错
                if (typeof console != "undefined") {
                    console.log(e, 123);
                }
            }
            // console.log(startTime)
            // // 将结果返回出来,导出文件
            // return date;
            // 首先加载  <table id='excelTable'> 标签 为 workbook对象
            // let workbook = XLSX.utils.table_to_book(document.getElementById('mytable'));
            // // 先定义列宽 , 我这里文件一共有7 列 ,所以设置7列宽度相等都为 20 ,如果你有很多列建议直接 map()
            // let wscols = [
            //     { wch: 20 },
            //     { wch: 20 },
            //     { wch: 20 },
            //     { wch: 20 },
            //     { wch: 20 },
            //     { wch: 20 },
            //     { wch: 20 },
            //     { wch: 20 },
            //     { wch: 20 },
            //     { wch: 20 },
            //     { wch: 20 },
            //     { wch: 20 },
            //     { wch: 20 },
            //     { wch: 20 }
            // ];
            // // 获取 需要设置样式的 sheet ,我这里只有 一个 sheet 所以索引默认加载了第一个
            // const sheet = workbook.Sheets[workbook.SheetNames[0]];
            // // 设置列宽
            // sheet['!cols'] = wscols;
            //
            // // 定义框线样式
            // const borderAll = {
            //     color: { auto: 1 },
            //     top: {style: "thin"},
            //     bottom: { style: "thin"},
            //     left: { style: "thin" },
            //     right: { style: "thin" }
            // };
            //
            // // 这里的意思为 先默认代表表格的 7 个列  的 列号
            // // 比如 A2 意思是 第一列 第2// const _letterList = ['A', 'B', 'C', 'D', 'E', 'F', 'G','H','I','J','K','L']
            // // 定义一个 箭头函数,接受三个参数,分别为 当前Sheet , 行列号(例如:‘A2’), 是否是新增样式
            // const _mapCellStyle = (_sheet, _key, _type) => {
            //     const _cellStyle = {
            //         border: borderAll,
            //         alignment: {
            //             wrapText: true,
            //             horizontal: "center",
            //             vertical: "center"
            //         },
            //         font: {
            //             name: "微软雅黑",
            //             sz: 10
            //         },
            //         bold: true,
            //         numFmt: "0"
            //     }
            //
            //     if (_type === 'append') {
            //         // 需要新增样式,说明当前加载的sheet中并不存在该单元格,可能当前单元格被前边合并,这种被合并的单元格也得设置样式,
            //         // 否则就会出现 合并单元格只有第一格带框线,后边没框线的情况出现,所以这里需要将后边的边框样式也加上。
            //         _sheet[_key] = {
            //             s: _cellStyle
            //         }
            //     } else {
            //         // 若不是新增样式 则代表sheet中已存在该表格直接修改其 s 属性即可使属性生效
            //         if (typeof _sheet[_key] === 'object') {
            //             _sheet[_key].s = _cellStyle
            //         }
            //     }
            // }
            //
            // // sheet 不懂得可以单独打印一下,它其实就是一个对象,键代表行列号(‘A2’),值为该单元格的值,样式等,
            // // 我们需要做的就是修改其值中的样式
            // Object.keys(sheet).forEach((i, _) => {
            //     // 无用属性直接过滤
            //     if (i !== "!ref" || i !== "!cols" || i !== "!merges" || i !== "Am") {
            //         // 首先设置遍历到的 当前 key
            //         let _nowKey = i
            //         // 然后调用 _mapCellStyle  渲染当前单元格样式
            //         _mapCellStyle(sheet, _nowKey)
            //         // 我们这里先获取下一个行列号  例如当前_nowKey 是 A1  这里就是获取到 B1 ,及 当前行的 下一列数据
            //         let _nextKey = _letterList[_letterList.indexOf(_nowKey[0]) + 1] + i.slice(1)
            //
            //         // 判断 B1 是否在 Sheet的key中,如果不存在,只可能是因为B1所在单元格已经被A1所合并,所以我们需要将B1也调用一下  _mapCellStyle
            //         // 渲染 B1 的样式,不然就会出现 A1 B1 这两格是合并的状态,只有A1有框线,而B1 没有框线的情况。
            //         // 这里用 while 就是 要把需要合并的单元格全部 渲染上样式,直到可能 B4 在 Sheet中 停止
            //         while (_nowKey[0] !== 'G' && !Object.keys(sheet).includes(_nextKey)) {
            //             _mapCellStyle(sheet, _nextKey, 'append')
            //             // 这里就是简单的交换索引
            //             _nowKey = _nextKey
            //             _nextKey = _letterList[_letterList.indexOf(_nowKey[0]) + 1] + _nowKey.slice(1)
            //         }
            //     }
            // })
            //
            // let wopts = {
            //     bookType: 'xlsx',
            //     bookSST: false,
            //     type: 'buffer',
            // }
            // console.log(workbook)
            // console.log(wopts)
            // let _blob = XLSX.write(workbook, wopts);
            //
            // window.saveAs(new Blob([_blob], {
            //     type: "application/octet-stream"
            // }), "项目信息一张表.xlsx");
        },

        sheet2blob(sheet, sheetName) {
            // console.log(sheet, sheetName, 'sheet, sheetName')
            sheetName = sheetName || 'sheet1'
            console.log(sheetName, 'sheetName')
            var workbook = {
                SheetNames: [sheetName],
                Sheets: {}
            }
            workbook.Sheets[sheetName] = sheet // 生成excel的配置项

            var wopts = {
                bookType: 'xlsx', // 要生成的文件类型
                bookSST: false, // 是否生成Shared String Table,官方解释是,如果开启生成速度会下降,但在低版本IOS设备上有更好的兼容性
                type: 'binary'
            }
            var wbout = XLSX.write(workbook, wopts)
            var blob = new Blob([s2ab(wbout)], {
                type: 'application/octet-stream'
            }) // 字符串转ArrayBuffer
            function s2ab(s) {
                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
            }
            return blob
        },

问题全部代码前端一个id就可以了答案对了的话可以去我另外那个拿奖励

  • 写回答

2条回答 默认 最新

  • 阿里嘎多学长 2023-04-10 17:22
    关注

    以下内容部分参考ChatGPT模型:


    这段代码主要是将表格数据转化为excel文件并下载,其中用到了XLSX库进行处理。具体步骤如下:

    1. 获取表格数据

      var wb = XLSX.utils.table_to_sheet(document.querySelector("#mytable"), {raw: true});
      

      其中,#mytable为表格的id名,这里使用了XLSX库提供的table_to_sheet方法将表格数据转化为工作簿。

    2. 设置单元格样式

      for (const key in wb) {
      if (key.indexOf('!') === -1) {
       wb[key].s = {...}
      }
      }
      

      这里使用了for...in循环遍历工作簿中的单元格,然后通过设置单元格样式的方式实现对单元格的样式设置。其中,s属性用来设置单元格样式,可以设置字体、边框、对齐方式等。

    3. 导出excel文件

      let date = this.sheet2blob(wb)
      let data = new Date();
      let startTime = data.getFullYear() + '年' + (data.getMonth() + 1) + '月' + data.getDate() + '日' + data.getHours() + '时' + data.getMinutes() + '分' + data.getSeconds();
      try {
      window.saveAs(
       new Blob([date], {type: "application/octet-stream"}),
       startTime + '.xlsx'
      );
      } catch (e) {
      if (typeof console != "undefined") {
       console.log(e, 123);
      }
      }
      

      这里使用了Blob对象和window.saveAs方法实现excel文件的导出和下载。具体来说,先将工作簿转化为blob对象,然后通过window.saveAs方法将blob对象下载为excel文件。其中,Blob对象表示一个不可变、原始数据的类文件对象,type属性表示文件类型,window.saveAs方法用来将blob对象下载为文件。

    最后,这里提供一个参考的示例代码:

    function exportExcel() {
      var wb = XLSX.utils.table_to_sheet(document.querySelector("#mytable"), {raw: true});
      for (const key in wb) {
        if (key.indexOf('!') === -1) {
          wb[key].s = {
            font: {
              sz: 13,
              bold: false,
              color: {
                rgb: '000000'
              }
            },
            border: {
              top: {style: 'thin'},
              bottom: {style: 'thin'},
              left: {style: 'thin'},
              right: {style: 'thin'}
            },
            alignment: {
              horizontal: 'center',
              vertical: 'center',
              wrap_text: true
            }
          }
        }
      }
      let date = sheet2blob(wb)
      let data = new Date();
      let startTime = data.getFullYear() + '年' + (data.getMonth() + 1) + '月' + data.getDate() + '日' + data.getHours() + '时' + data.getMinutes() + '分' + data.getSeconds();
      try {
        window.saveAs(
          new Blob([date], {type: "application/octet-stream"}),
          startTime + '.xlsx'
        );
      } catch (e) {
        if (typeof console != "undefined") {
          console.log(e, 123);
        }
      }
    }
    
    function sheet2blob(sheet, sheetName) {
      sheetName = sheetName || 'sheet1'
      var workbook = {
        SheetNames: [sheetName],
        Sheets: {}
      }
      workbook.Sheets[sheetName] = sheet
      var wopts = {
        bookType: 'xlsx',
        bookSST: false,
        type: 'binary'
      }
      var wbout = XLSX.write(workbook, wopts)
      var blob = new Blob([s2ab(wbout)], {
        type: 'application/octet-stream'
      })
      function s2ab(s) {
        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
      }
      return blob
    }
    

    如果我的建议对您有帮助、请点击采纳、祝您生活愉快

    评论

报告相同问题?

问题事件

  • 创建了问题 4月10日

悬赏问题

  • ¥15 单纯型python实现编译报错
  • ¥15 c++2013读写oracle
  • ¥15 c++ gmssl sm2验签demo
  • ¥15 关于模的完全剩余系(关键词-数学方法)
  • ¥15 有没有人懂这个博图程序怎么写,还要跟SFB连接,真的不会,求帮助
  • ¥15 PVE8.2.7无法成功使用a5000的vGPU,什么原因
  • ¥15 is not in the mmseg::model registry。报错,模型注册表找不到自定义模块。
  • ¥15 安装quartus II18.1时弹出此error,怎么解决?
  • ¥15 keil官网下载psn序列号在哪
  • ¥15 想用adb命令做一个通话软件,播放录音