前端实现导出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()
  }
})()

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

那个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>


前端导出文件带有图片的功能按照上面的步骤,负责上面的代码根据自己的需求去修改即可,

  • 6
    点赞
  • 19
    收藏
    觉得还不错? 一键收藏
  • 17
    评论
Java中使用POI库可以实现Excel文件的操作,包括读取、写入、修改等。下面是使用POI库实现图片的模板导出Excel的示例代码: 1. 导入依赖库 在pom.xml文件中添加以下依赖: ``` <dependency> <groupId>org.apache.poi</groupId> <artifactId>poi</artifactId> <version>3.17</version> </dependency> <dependency> <groupId>org.apache.poi</groupId> <artifactId>poi-ooxml</artifactId> <version>3.17</version> </dependency> <dependency> <groupId>org.apache.poi</groupId> <artifactId>poi-ooxml-schemas</artifactId> <version>3.17</version> </dependency> ``` 2. 创建Excel模板 创建一个Excel模板,包含需要导出的数据和图片。示例模板如下: ![excel_template.png](https://cdn.jsdelivr.net/gh/occlive/ImageHost01/excel_template.png) 3. 编写Java代码 Excel模板创建完成后,就可以使用POI库来读取模板、填充数据和图片导出Excel文件了。以下是示例代码: ```java import java.io.*; import java.util.*; import org.apache.poi.ss.usermodel.*; import org.apache.poi.xssf.usermodel.*; public class ExcelExportUtil { public static void export(List<Map<String, Object>> dataList, String templatePath, String exportPath) throws Exception { InputStream is = new FileInputStream(templatePath); XSSFWorkbook workbook = new XSSFWorkbook(is); XSSFSheet sheet = workbook.getSheetAt(0); int rowIndex = 1; for (Map<String, Object> data : dataList) { XSSFRow row = sheet.createRow(rowIndex++); int cellIndex = 0; for (String key : data.keySet()) { Object value = data.get(key); XSSFCell cell = row.createCell(cellIndex++); if (value instanceof String) { cell.setCellValue((String) value); } else if (value instanceof Double) { cell.setCellValue((Double) value); } else if (value instanceof Date) { cell.setCellValue((Date) value); } else if (value instanceof Calendar) { cell.setCellValue((Calendar) value); } else if (value instanceof Boolean) { cell.setCellValue((Boolean) value); } else if (value instanceof byte[]) { // 插入图片 int pictureIdx = workbook.addPicture((byte[]) value, Workbook.PICTURE_TYPE_JPEG); CreationHelper helper = workbook.getCreationHelper(); Drawing drawing = sheet.createDrawingPatriarch(); ClientAnchor anchor = helper.createClientAnchor(); anchor.setCol1(cellIndex - 1); anchor.setRow1(rowIndex - 1); Picture pict = drawing.createPicture(anchor, pictureIdx); pict.resize(); } else { cell.setCellValue(value.toString()); } } } OutputStream os = new FileOutputStream(exportPath); workbook.write(os); os.close(); } } ``` 代码解释: - `export`方法接受一个数据列表、一个Excel模板文件路径和一个导出Excel文件路径作为参数,将数据填充到模板中并导出Excel文件 - 首先使用`FileInputStream`读取Excel模板文件,然后创建`XSSFWorkbook`和`XSSFSheet`对象 - 遍历数据列表,对于每个数据项,创建一个新的行,并为每个属性创建一个单元格,使用单元格的`setCellValue`方法填充数据 - 如果属性的值是一个图片,则调用`Workbook.addPicture`方法将图片添加到工作簿中,并使用`Sheet.createDrawingPatriarch`方法创建绘图对象,在单元格上创建图片,最后调用`Picture.resize`方法调整图片大小 - 最后使用`FileOutputStream`将工作簿写入Excel文件中 4. 调用导出方法 在main方法中调用export方法进行导出: ```java import java.util.*; public class Main { public static void main(String[] args) throws Exception { List<Map<String, Object>> dataList = new ArrayList<>(); Map<String, Object> data1 = new HashMap<>(); data1.put("name", "张三"); data1.put("age", 20); data1.put("avatar", FileUtils.readFileToByteArray(new File("avatar.jpg"))); dataList.add(data1); Map<String, Object> data2 = new HashMap<>(); data2.put("name", "李四"); data2.put("age", 25); data2.put("avatar", FileUtils.readFileToByteArray(new File("avatar.jpg"))); dataList.add(data2); ExcelExportUtil.export(dataList, "template.xlsx", "export.xlsx"); } } ``` 以上代码会生成一个包含两条记录和图片Excel文件,效果如下: ![excel_export.png](https://cdn.jsdelivr.net/gh/occlive/ImageHost01/excel_export.png) 希望对您有所帮助!

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 17
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值