js导出excel数据，图片，身份证号码

小疯仔

已于 2023-02-08 17:49:15 修改

阅读量1.9k

点赞数

分类专栏： js 文章标签： excel javascript 开发语言

于 2023-02-08 17:48:29 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_45289656/article/details/128939539

版权

js 专栏收录该内容

38 篇文章

订阅专栏

文章详细描述了如何在JavaScript中处理Base64格式的图片并正确导出到Excel，同时解决了身份证号码显示为000的问题，以及时间戳转换为日期格式的技巧。提供了完整的代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

JavaScript导出图片和数据到Excel

解决了以下问题：
1、解决了图片大小的问题
2、解决身份证号码后3位是0的问题
3、时间转换问题

先上个完成图哈

在这里插入图片描述

首先遇到的问题是图片是base64的格式，如果是正常的格式（http or .jpg）是能正常下载的，但是这次是base64的格式，然后导出就会遇到是空的问题,顺便把图片大小的问题解决了，如果不加宽高的话会使图片导出之后太大

"<td><img src='data:image/jpg;base64," +row[key] + ' ' +  'width=' + width  + ' ' + 'height=' + height  + ' /></td>';

然后是身份证后三位显示000的问题
网上查了很多，说是啥excel的文本问题，字数太长，找到两种方法
方法一

tbody +=`<td style="text-align:center;">${row[key].toString() + ','} </td>`

方法二

tbody +=`<td style="text-align:center;mso-number-format:'\@'">${row[key]} </td>`

最后解决时间问题
有很多解决时间戳转换的问题，随便写一个就行了

function add0(m) {
 return m < 10 ? "0" + m : m;
 }
 function format(shijianchuo) {
   var time = new Date(shijianchuo);
   var y = time.getFullYear();
   var m = time.getMonth() + 1;
   var d = time.getDate();
   var h = time.getHours();
   var mm = time.getMinutes();
   var s = time.getSeconds();
   return (
     y +
     "-" +
     add0(m) +
     "-" +
     add0(d) +
     " " +
     add0(h) +
     ":" +
     add0(mm) +
     ":" +
     add0(s)
   );
 }

哦，对了，还有一个表头数据没沾出来,只贴几个有用的吧

theadData: [
        {
          type: "CustomerPhoto",
          title: "照片",
        },
        {
          type: "CustomerIdCard",
          title: "身份证号",
        },
        {
          type: "CreateTime",
          title: "时间",
        },
        ...
      ],

最最最最最最最最后~
附上完整的代码

tableToNotIE() {
      // 编码要用utf-8，不然会出现中文乱码
      let uri = "data:application/vnd.ms-excel;base64,",
        template =
          '<html xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:x="urn:schemas-microsoft-com:office:excel" xmlns="http://www.w3.org/TR/REC-html40"><head><meta charset="UTF-8"><!--[if gte mso 9]><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet><x:Name>{worksheet}</x:Name><x:WorksheetOptions><x:DisplayGridlines/></x:WorksheetOptions></x:ExcelWorksheet></x:ExcelWorksheets></x:ExcelWorkbook></xml><![endif]--></head><body><table>{table}</table></body></html>',
        base64 = function (s) {
          return window.btoa(unescape(encodeURIComponent(s)));
        },
        format = (s, c) => {
          return s.replace(/{(\w+)}/g, (m, p) => {
            return c[p];
          });
        };
      return (table, name) => {
        let ctx = {
          worksheet: name,
          table,
        };

        //创建下载
        let link = document.createElement("a");
        link.setAttribute("href", uri + base64(format(template, ctx)));

        link.setAttribute("download", name);

        link.click();
      };
    },

    // 导出
    export2Excel(theadData, tbodyData, dataname) {
      let th_len = theadData.length; // 表头的长度
      let tb_len = tbodyData.length; // 记录条数
      let width = 40; // 设置图片大小
      let height = 40;
      let newTime = new Date();
      this.exportTime = format(newTime);
      // 添加表头信息
      let thead =
        "<thead><tr style='margin-bottom:10px;font-size: 22px'><th colspan='12'>季卡列表</th></tr>";
      let tr = "<tr>";
      for (let i = 0; i < th_len; i++) {
        tr += "<th>" + theadData[i].title + "</th>";
      }
      let tr2 =
        "<tr><th style='width: 100px'>导出时间</th><th colspan='11'>" +
        this.exportTime +
        "</th></tr>";
      thead += tr2 + tr + "</tr></thead>";

      let tbody = "<tbody>";
      for (let i = 0; i < tb_len; i++) {
        tbody += "<tr>";
        let row = tbodyData[i]; // 获取每一行数据
        for (let j = 0; j < theadData.length; j++) {
          for (let key in row) {
            if (theadData[j].type == key) {
              if (key == "CustomerPhoto") {
                tbody +=
                  "<td><img src=data:image/jpg;base64," +
                  row[key] +
                  ' ' +  'width=' + width  + ' ' + 'height=' + height  + ' /></td>';
              } else if (key == "CreateTime") {
                tbody += `<td style="text-align:center"> ${format(
                  row[key]
                )}  </td>`;
              } else if (key == "CustomerIdCard") {
                tbody +=
                  `<td style="text-align:center;mso-number-format:'\@'">${row[key]} </td>`
              } else {
                tbody += '<td style="text-align:center">' + row[key] + "</td>";
              }
            }
          }
        }
        tbody += "</tr>";
      }
      tbody += "</tbody>";
      function add0(m) {
        return m < 10 ? "0" + m : m;
      }
      function format(shijianchuo) {
        var time = new Date(shijianchuo);
        var y = time.getFullYear();
        var m = time.getMonth() + 1;
        var d = time.getDate();
        var h = time.getHours();
        var mm = time.getMinutes();
        var s = time.getSeconds();
        return (
          y +
          "-" +
          add0(m) +
          "-" +
          add0(d) +
          " " +
          add0(h) +
          ":" +
          add0(mm) +
          ":" +
          add0(s)
        );
      }

      let table = thead + tbody;
      // 导出表格
      tableToNotIE(table, "季卡列表");
    },