前端表格导出案例，导出带图片

前端项目经常用到要导出表格之类的，有的时候还会用到导出的时候带表格，在此特地做了一下总结记录，

因为导出的时候表头是不固定的，所以相关的思路如下：

创建完相应的js之后，在export.js中做相关的策略，将固定的表头写死，不固定的表头后端传回然后拼接到相关表头上，后端返回的数据按照一一对应的格式进行返回，然后进行一一对应添加到表格中进行导出。其中图片返回穿数组，然后图片的拼接地址在table2excel.js中进行修改，已做相应的注释。后端返回的格式已经贴图。按照此种方法和后端对接基本上就成了。

表格导出且带有图片，相关代码如下：

1.创建table2excel.js

/* eslint-disable */
let idTmr;
const getExplorer = () => {
  let explorer = window.navigator.userAgent;
  //ie
  if (explorer.indexOf("MSIE") >= 0) {
    return "ie";
  }
  //firefox
  else if (explorer.indexOf("Firefox") >= 0) {
    return "Firefox";
  }
  //Chrome
  else if (explorer.indexOf("Chrome") >= 0) {
    return "Chrome";
  }
  //Opera
  else if (explorer.indexOf("Opera") >= 0) {
    return "Opera";
  }
  //Safari
  else if (explorer.indexOf("Safari") >= 0) {
    return "Safari";
  }
};
// 判断浏览器是否为IE
const exportToExcel = (data, name) => {
  // 判断是否为IE
  if (getExplorer() == "ie") {
    tableToIE(data, name);
  } else {
    tableToNotIE(data, name);
  }
};

const Cleanup = () => {
  window.clearInterval(idTmr);
};

// ie浏览器下执行
const tableToIE = (data, name) => {
  let curTbl = data;
  let oXL = new ActiveXObject("Excel.Application");

  //创建AX对象excel
  let oWB = oXL.Workbooks.Add();
  //获取workbook对象
  let xlsheet = oWB.Worksheets(1);
  //激活当前sheet
  let sel = document.body.createTextRange();
  sel.moveToElementText(curTbl);
  //把表格中的内容移到TextRange中
  sel.select;
  //全选TextRange中内容
  sel.execCommand("Copy");
  //复制TextRange中内容
  xlsheet.Paste();
  //粘贴到活动的EXCEL中

  oXL.Visible = true;
  //设置excel可见属性

  try {
    let fname = oXL.Application.GetSaveAsFilename(
      "Excel.xls",
      "Excel Spreadsheets (*.xls), *.xls"
    );
  } catch (e) {
    print("Nested catch caught " + e);
  } finally {
    oWB.SaveAs(fname);

    oWB.Close((savechanges = false));
    //xls.visible = false;
    oXL.Quit();
    oXL = null;
    // 结束excel进程，退出完成
    window.setInterval("Cleanup();", 1);
    idTmr = window.setInterval("Cleanup();", 1);
  }
};

// 非ie浏览器下执行
const tableToNotIE = (function () {
  // 编码要用utf-8不然默认gbk会出现中文乱码
  const 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>';

  const base64 = function (s) {
    return window.btoa(unescape(encodeURIComponent(s)));
  };

  const format = (s, c) => {
    return s.replace(/{(\w+)}/g, (m, p) => {
      return c[p];
    });
  };

  return (table, name) => {
    const ctx = {
      worksheet: name,
      table,
    };

    const url = uri + base64(format(template, ctx));

    if (navigator.userAgent.indexOf("Firefox") > -1) {
      window.location.href = url;
    } else {
      const aLink = document.createElement("a");
      aLink.href = url;
      aLink.download = name || "";
      let event;
      if (window.MouseEvent) {
        event = new MouseEvent("click");
      } else {
        event = document.createEvent("MouseEvents");
        event.initMouseEvent(
          "click",
          true,
          false,
          window,
          0,
          0,
          0,
          0,
          0,
          false,
          false,
          false,
          false,
          0,
          null
        );
      }
      aLink.dispatchEvent(event);
    }
  };
})();

// 导出函数
const table2excel = (column, data, excelName) => {
  const typeMap = {
    image: getImageHtml,
    text: getTextHtml,
  };

  let thead = column.reduce((result, item) => {
    result += `<th>${item.title}</th>`;
    return result;
  }, "");

  thead = `<thead><tr><th style="text-align:left;height:60px;" colspan="${column.length}";>${excelName}</th></tr><tr>${thead}</tr></thead>`;

  let tbody = data.reduce((result, row) => {
    const temp = column.reduce((tds, col) => {
      tds += typeMap[col.type || "text"](row[col.key], col);
      return tds;
    }, "");
    result += `<tr>${temp}</tr>`;
    return result;
  }, "");
  tbody = `<tbody>${tbody}</tbody>`;

  const table = thead + tbody;

  // 导出表格
  exportToExcel(table, excelName);

  function getTextHtml(val) {
    return `<td style="text-align: center">${val}</td>`;
  }

  function getImageHtml(val = [], options) {
    if (typeof val === "string") val = [val];
    if(val==null) val = []
    // console.log('ggggggggggggg',val)
    let string = "";
    const tdOptions = Object.assign(
      { width: 60, height: 60 },
      {
        width: (options.width * val.length || 60) + 10,
        height: options.height || 60,
      }
    );

    for (let i = 0; i < val.length; i++) {
      //此处是图片的拼接地址
      if(i<1){
        string += `<td style="width: ${options.width}px; height: ${tdOptions.height + 10}px;">
          <img src="图片的拼接地址/${val[i] || ''}" width=${options.width} height=30></td>`;
      }
     
    }
    return string;
  }
};

export default table2excel;

2.创建export.js并且引用table2excel.js

import table2excel from "@/utils/table2excel.js";

// ["aa.jpg,bb.jpg","cc.jpg"] => ["aa.jpg","bb.jpg","cc.jpg"]
function resolveSrc(arr) {
  const result = [];
  for (const str of arr) {
    if (str.indexOf(",") !== -1) {
      result.push(...str.split(","));
    } else {
      result.push(str);
    }
  }
  return result;
}

function exportExcel(data, headers, excelName) {
  const keys = Array.from(new Array(26), (_, i) => String.fromCharCode(65 + i));
  headers = headers.map((item, index) => {
    if (item.indexOf("图片") === -1) {
      return {
        title: item,
        key: keys[index],
        type: "text",
      };
    } else {
      return {
        title: item,
        key: keys[index],
        type: "image",
        width: 80,
        height: 50,
      };
    }
  });
  data = data.map((item) => {
    const obj = {};
    item.forEach((value, i) => {
      if (i === 0) value = value * 1 + 1;
      if (Array.isArray(value)) {
        obj[keys[i]] = resolveSrc(value);
      } else if (typeof value === "string") {
        // obj[keys[i]]=value.replace(/\s/g, "");
        if(i===11){
          obj[keys[i]]=value.trim().replace(/[)]/g, ")<br>");
        }else{
          obj[keys[i]] = value
          .trim()
          .replace(/\[|\]/g, "")
          .split(",");
        }
      } else {
        obj[keys[i]] = value;
      }
    });
    return obj;
  });
  // console.log('hhhhhhh',headers, data, excelName)
  data.forEach(da=>{
    // console.log('-=12',da)
  })
  table2excel(headers, data, excelName);
}

// 检查记录表头
export function exportInspectRecord(data, excelName) {
  // console.log('=111',data,excelName)
  var newArr = data.questions
  let headers = [
    "序号",
    "检查时间",
    "检查人员",
    "检查人员单位",
    "检查类别",
    "受检单位名称",
    "检查结果",
    "负责人",
    "负责人电话",
    "网格员",
    "网格员电话",
    // "检查问题",
    "隐患图片", // 图片
  ];
  headers.splice(11,0,...newArr)
  // console.log(headers,'-1')
  exportExcel(data.list, headers, excelName);
}

// 日常整改通知表头
export function exportDailyRectify(data, excelName) {

  let newArr = ['复查时间','复查人员','复查说明','复查图片'],maxValue = 1,maxArr = [],newFu=[],newData = []
  if(data.length>0){
    data.forEach(item=>{
      maxArr.push(item[16].length)
    })
    maxValue = Math.max(...maxArr)
  }
  for(var i = 0;i<maxValue;i++){
    newArr.forEach(item=>{
      newFu.push(item+Number(i+1))
    })
  }
  if(data.length>0){
    data.forEach(item=>{
      item.newEvery = []
      item[16].forEach(self=>{
        //填充新数组
        item.newEvery.push(self.reCheckedDate,self.reCheckedLeader,self.reCheckedDesc,self.reCheckedPic)
      })
      // 补充undefined的值
      for(var i = 0;i<maxValue-Number(item[16].length);i++){
        item.newEvery.push('','','','')
      }
      item.splice(16,0,...item.newEvery)
    })
  }
  data.forEach(item=>{
    newData.push(item.splice(0,item.length-1))
  })
  let headers = [
    "序号",
    "社区",
    "网格",
    "检查名称",
    "检查时间",
    "检查人员",
    "受检单位",
    "负责人",
    "负责人电话",
    "网格员",
    "网格员电话",
    "隐患内容",
    "整改要求",
    "整改方式",
    "是否已整改",
    "隐患图片",
    // "复查时间",
    // "复查人员",
    // "复查说明",
    // "复查图片",
  ];
  let newHeader = headers.concat(newFu)
  // console.log(newHeader,'www')
  exportExcel(newData, newHeader, excelName);
}

// 专项整改通知表头
export function exportSpecialRectify(data, excelName) {
  // console.log(data,excelName)
  let newArr = ['复查时间','复查人员','复查说明','复查图片'],maxValue = 1,maxArr = [],newFu=[],newData = []
  if(data.length>0){
    data.forEach(item=>{
      maxArr.push(item[16].length)
    })
    maxValue = Math.max(...maxArr)
  }
  for(var i = 0;i<maxValue;i++){
    newArr.forEach(item=>{
      newFu.push(item+Number(i+1))
    })
  }
  if(data.length>0){
    data.forEach(item=>{
      item.newEvery = []
      item[16].forEach(self=>{
        //填充新数组
        item.newEvery.push(self.reCheckedDate,self.reCheckedLeader,self.reCheckedDesc,self.reCheckedPic)
      })
      // 补充undefined的值
      for(var i = 0;i<maxValue-Number(item[16].length);i++){
        item.newEvery.push('','','','')
      }
      item.splice(16,0,...item.newEvery)
    })
  }
  data.forEach(item=>{
    newData.push(item.splice(0,item.length-1))
  })
  let headers = [
    "序号",
    "社区",
    "网格",
    "检查名称",
    "检查时间",
    "检查人员",
    "受检单位",
    "负责人",
    "负责人电话",
    "网格员",
    "网格员电话",
    "隐患内容",
    "整改要求",
    "整改方式",
    "是否已整改",
    "隐患图片",
    // "复查时间",
    // "复查人员",
    // "复查说明",
    // "复查图片",
  ];
  let newHeader = headers.concat(newFu)
  // console.log(newHeader,'www')
  exportExcel(newData, newHeader, excelName);
}

// 日常整改信息通告表头
export function exportDailyAnnouncement(data, excelName) {
  let headers = [
    "序号", "社区", "网格", "隐患类型", "检查时间", "检查人员",
    "检查地点", "负责人", "负责人电话", "网格员", "网格员电话",
    "隐患内容", "整改要求", "整改方式", "是否已整改",  "隐患图片", 
  ];
  // // data = data.map(item=> item.slice(0,14));
  // exportExcel(data, headers, excelName);
  let newArr = ['复查时间','复查人员','复查说明','复查图片'],maxValue = 1,maxArr = [],newFu=[],newData = []
  if(data.length>0){
    data.forEach(item=>{
      maxArr.push(item[16].length)
    })
    maxValue = Math.max(...maxArr)
  }
  for(var i = 0;i<maxValue;i++){
    newArr.forEach(item=>{
      newFu.push(item+Number(i+1))
    })
  }
  if(data.length>0){
    data.forEach(item=>{
      item.newEvery = []
      item[16].forEach(self=>{
        //填充新数组
        item.newEvery.push(self.reCheckedDate,self.reCheckedLeader,self.reCheckedDesc,self.reCheckedPic)
      })
      // 补充undefined的值
      for(var i = 0;i<maxValue-Number(item[16].length);i++){
        item.newEvery.push('','','','')
      }
      item.splice(16,0,...item.newEvery)
    })
  }
  data.forEach(item=>{
    newData.push(item.splice(0,item.length-1))
  })
  let newHeader = headers.concat(newFu)
  // console.log(newHeader,'www')
  exportExcel(newData, newHeader, excelName);
}

// 专项整改信息通告表头
export function exportSpecialAnnouncement(data, excelName) {
  let headers = [
    "序号", "社区", "网格", "检查名称", "检查时间", "检查人员",
    "检查地点", "负责人", "负责人电话", "网格员", "网格员电话",
    "隐患内容", "整改要求", "整改方式",  "是否已整改", "隐患图片"
  ];
  // data = data.map(item=> item.slice(0,14));
  // exportExcel(data, headers, excelName);

  let newArr = ['复查时间','复查人员','复查说明','复查图片'],maxValue = 1,maxArr = [],newFu=[],newData = []
  if(data.length>0){
    data.forEach(item=>{
      maxArr.push(item[16].length)
    })
    maxValue = Math.max(...maxArr)
  }
  for(var i = 0;i<maxValue;i++){
    newArr.forEach(item=>{
      newFu.push(item+Number(i+1))
    })
  }
  if(data.length>0){
    data.forEach(item=>{
      item.newEvery = []
      item[16].forEach(self=>{
        //填充新数组
        item.newEvery.push(self.reCheckedDate,self.reCheckedLeader,self.reCheckedDesc,self.reCheckedPic)
      })
      // 补充undefined的值
      for(var i = 0;i<maxValue-Number(item[16].length);i++){
        item.newEvery.push('','','','')
      }
      item.splice(16,0,...item.newEvery)
    })
  }
  data.forEach(item=>{
    newData.push(item.splice(0,item.length-1))
  })
  
  let newHeader = headers.concat(newFu)
  // console.log(newHeader,'www')
  exportExcel(newData, newHeader, excelName);
}

3.页面引用

import { exportInspectRecord } from "../export.js";


 onExport() {
      this.$confirm("是否确定导出？", "", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        cancelButtonClass: "btn-custom-cancel",
        type: "warning",
      })
        .then(async () => {
          const params = {
            checkedLeader: this.params.checkedLeader,
            type: this.params.type,
            companyName: this.params.companyName,
            startDate: this.params.startDate,
            endDate: this.params.endDate,
            adjective: this.params.adjective,
            communityId : this.params.communityId
          };
          if (this.type === "daily") {
            const res = await getDailyExcel({ ...params, checkedTypeId: this.id });
            exportInspectRecord(res.data, "日常检查记录数据.xls");
          }
        })
        .catch((e) => {
          throw e;
        });
    },

接口返回的数据格式如下：

posted @ 2025-01-13 10:19 星宝攸宁阅读(148) 评论(0) 收藏举报

刷新页面返回顶部

星宝攸宁

前端表格导出案例，导出带图片

公告