前端实现导出excel带图片功能(复制即可用版)

h周杰偷

已于 2022-09-07 14:52:45 修改

阅读量6.3k

点赞数 7

CC 4.0 BY-SA版权

文章标签：前端 safari firefox

于 2022-06-18 11:01:13 首次发布

本文链接：https://blog.csdn.net/weixin_58467680/article/details/125344115

本文介绍了如何在前端通过新npm包`export-img`实现导出Excel表格，包括处理图片路径、自定义图片尺寸，并提供了完整的代码示例。适合前端开发者了解图片导出功能的实现步骤。

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

前端实现excel导出，带有图片

前言:本文导出功能介绍

前言:本文导出功能介绍

导出带有图片的excel功能需要和后端去进行沟通，
因为导出功能前端实现的化需要导出文件的数据类型不能和之前正常的导出格式一样了，前端需要的数据类型要是正常的数组加对象的格式。

现在更新npm包版本:

可以直接下载依赖无需写那么多操作只要传参数就可以完成

	//首先先安装依赖
	npm i export-img
	// 在需要使用的地方引入依赖
	import export from 'export-img'
	//文件封装了一些导出的方法
	import export from 'export-img'
	 
	const {exportExcel} from export
	
	exportExcel(theadData,tbodyData,name,width,height)

	 exportExcel 函数里面有 5 个参数其中有三个参数是必填
	 theadData 是表头展示数据 ,(必填) 类型是 Array
	 tbodyData 是表格展示的数据,(必填)类型是 Array
	 name 是导出文件的名字 (必填)String
	 width 是自定义图片的 width (默认值是 120)，height 是自定义图片的 height(80) 数据类型是 Number

前端实现导出带有图片步骤介绍:

1.第一步是先写一下平常导出功能的函数，
2.第二步是对于我们写好的导出功能js文件进行引入，
3.第三步是我们对于导出数据的表头去进行自己定义
4.第四步是对于要导出的数据里面要处理的图片路径进行处理转化为图片

导出功能具体实现步骤

1.首先是我们导出的js文件封装把下面的js代码复制到一个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会出现中文乱码
  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)

    // window.location.href = uri + base64(format(template, ctx))
    link.click()
  }
})()

第二步是我们引入上面的那些导出代码，

那个exoprt2Excel就是我上面的代码文件
3. 然后我导出功能实现的具体代码

<!DOCTYPE html>
<html lang="en">
 <head>
   <meta charset="UTF-8" />
   <title>导出图片和数据到Excel</title>
 </head>
 <body>
   <div id="app">点击</div>
 </body>
 <script src="./export2Excel.js"></script>
 <script>
   // tHeader和tbody的数据需要一一对应
   let tHeader = ["车名", "颜色", "照片"];
   let tbody = [
     {
       name: "林肯",
       color: "红色",
       pic: "https://img2.baidu.com/it/u=4020335929,583313623&fm=253&fmt=auto&app=138&f=JPEG?w=512&h=384",
     },
     {
       name: "林肯",
       color: "黄色",
       pic: "https://img1.baidu.com/it/u=1453715177,1769663341&fm=253&fmt=auto&app=120&f=JPEG?w=750&h=500",
     },
     {
       name: "林肯",
       color: "紫色",
       pic: "https://img1.baidu.com/it/u=1453715177,1769663341&fm=253&fmt=auto&app=120&f=JPEG?w=750&h=500",
     },
     {
       name: "林肯",
       color: "白色",
       pic: "https://img2.baidu.com/it/u=647676637,3137806543&fm=253&fmt=auto&app=120&f=JPEG?w=889&h=500",
     },
     {
       name: "林肯",
       color: "粉色",
       pic: "https://img0.baidu.com/it/u=2950100227,2008423144&fm=253&fmt=auto&app=120&f=JPEG?w=830&h=467",
     },
   ];
   const export2Excel = (theadData, tbodyData, dataname) => {
     let re = /http/; // 字符串中包含http,则默认为图片地址
     let th_len = theadData.length; // 表头的长度
     let tb_len = tbodyData.length; // 记录条数
     let width = 120; // 设置图片大小
     let height = 80;

     // 添加表头信息
     let thead = "<thead><tr>";
     for (let i = 0; i < th_len; i++) {
       thead += "<th>" + theadData[i] + "</th>";
     }
     thead += "</tr></thead>";

     // 添加每一行数据
     let tbody = "<tbody>";
     for (let i = 0; i < tb_len; i++) {
       tbody += "<tr>";
       let row = tbodyData[i]; // 获取每一行数据

       for (let key in row) {
         if (re.test(row[key])) {
           // 如果为图片，则需要加div包住图片
           //
           tbody +=
             '<td style="width:' +
             width +
             "px; height:" +
             height +
             'px; text-align: center; vertical-align: middle"><div style="display:inline"><img src=\'' +
             row[key] +
             "' " +
             " " +
             "width=" +
             '"' +
             width +
             '"' +
             " " +
             "height=" +
             '"' +
             height +
             '"' +
             "></div></td>";
         } else {
           tbody += '<td style="text-align:center">' + row[key] + "</td>";
         }
       }
       tbody += "</tr>";
     }
     tbody += "</tbody>";

     let table = thead + tbody;

     // 导出表格
     exportToExcel(table, dataname);
   };
   //
   const app = document.querySelector("#app");
   console.log(app, "app");
   app.onclick = function () {
     export2Excel(tHeader, tbody, '测试数据')
   }; //
   // export2Excel(tHeader, tbody, '我爱花朵')
 </script>
</html>