JavaScript导出图片和数据到Excel

以下方法可以利用json数据将图片地址生成图片导出到Excel，同样也可以将数据导出到Excel。解决网上许多方法关于导出图片到Excel却无法让图片在单元格内显示的问题，也解决了各类浏览器兼容问题。话不多少，先上车吧（哈哈）

1、目录结构

2、在页面中引入export2Excel.js文件

将tHeader和tbody作为参数调用export2Excel函数，就可以导出Excel了。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>导出图片和数据到Excel</title>
</head>
<body>
</body>
<script src="export2Excel.js"></script>
<script>// tHeader和tbody的数据需要一一对应let tHeader = ['鲜花','颜色','照片']let tbody = [{name: '玫瑰花',color: '红色',pic: 'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2801998497,4036145562&fm=27&gp=0.jpg'},{name: '菊花',color: '黄色',pic: 'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1506844670,1837003941&fm=200&gp=0.jpg'},{name: '牵牛花',color: '紫色',pic: 'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3056120770,1115785765&fm=27&gp=0.jpg'},{name: '梅花',color: '白色',pic: 'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2700343322,3431874915&fm=27&gp=0.jpg'},{name: '桃花花',color: '粉色',pic: 'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=602076004,4209938077&fm=27&gp=0.jpg'}]export2Excel(tHeader, tbody, '我爱花朵')
</script>
</html>

3、导出的Excel表格

4、VUE导出

如果在vue中使用的话，可以将export2Excel.js最后一个导出函数前面加上export，然后在使用的页面中将其导入就可以使用了。路径写自己目录中的路径

export2Excel.js文件

/* eslint-disable */
let idTmr;
const getExplorer = () => {let explorer = window.navigator.userAgent;//ieif (explorer.indexOf("MSIE") >= 0) {return 'ie';}//firefoxelse if (explorer.indexOf("Firefox") >= 0) {return 'Firefox';}//Chromeelse if (explorer.indexOf("Chrome") >= 0) {return 'Chrome';}//Operaelse if (explorer.indexOf("Opera") >= 0) {return 'Opera';}//Safarielse if (explorer.indexOf("Safari") >= 0) {return 'Safari';}
}
// 判断浏览器是否为IE
const exportToExcel = (data,name) => {// 判断是否为IEif (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对象excellet oWB = oXL.Workbooks.Add();//获取workbook对象let xlsheet = oWB.Worksheets(1);//激活当前sheetlet 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();}
})()// 导出函数
const export2Excel = (theadData, tbodyData, dataname) => {let re = /http/ // 字符串中包含http,则默认为图片地址let th_len = theadData.length // 表头的长度let tb_len = tbodyData.length // 记录条数let width = 40 // 设置图片大小let height = 60// 添加表头信息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)
}

根据实际开发需要，可以对导出函数进行相应的改动，比如向让表格生成编号，可以在导出函数里添加一行代码

这样就可以生成编号了

还可以通过改变width和height的大小得到相应大小的图片。

如果大家在使用的过程中遇到问题，可以给本同学留言，我们来一起探讨。这个导出方法为作者根据网络资料进行改进，如需转载，请联系博主。

JavaScript导出图片和数据到Excel相关推荐

php 导出tables,jquery+php实现导出datatables插件数据到excel的方法_php技巧
本文实例讲述了jquery+php实现导出datatables插件数据到excel的方法.分享给大家供大家参考.具体如下: DataTables是一个jQuery的表格插件.这是一个高度灵活的工具,依 ...
JAVA导出exls时报oom_如何实现导出百万条数据到EXCEL中不报OOM异常？
Java项目中使用POI导出百万条数据到Excel中,但是会出现内存溢出异常. 存在以下问题需要考虑POI导出条数限制6w+ 数据量大的话会导致内存溢出现在的做法是每6w条数据做一次分割,创建一个新 ...
使用POI导出百万级数据到excel的解决方案
使用POI导出百万级数据到excel的解决方案参考文章: (1)使用POI导出百万级数据到excel的解决方案 (2)https://www.cnblogs.com/hxun/p/11419006. ...
oracle百万级数据导入,用Perl从oracle导出百万级数据到excel
Perl从oracle导出百万级数据到excel excel 2007 可以存放1048576行.16384列的数据:excel 2003大概是65535行我从oracle中导出30万行60列的数据 ...
java读取百万条记录出错_如何实现导出百万条数据到EXCEL中不报OOM异常？
Java项目中使用POI导出百万条数据到Excel中,但是会出现内存溢出异常. 存在以下问题需要考虑POI导出条数限制6w+ 数据量大的话会导致内存溢出现在的做法是每6w条数据做一次分割,创建一个新 ...
vb用数组方式快速导出MSFlexGrid表格数据到Excel表格中
本来从MSFlexGrid或MSHFlexGrid导出数据到Excel中,是一个非常简单的问题,但论坛里还是经常有人问如何导出,有的虽然知道用单元格赋值方式循环导出,但速度太慢,因此写了一个通用的数据 ...
JS导出Echarts图标数据为Excel表格
开发需求需要在Echarts图表右上角添加一个按钮,将图表数据下载为Excel,下面获取到所有echarts数据后通过js手动对数据进行排列和换行的方式完成了需求 HTML结构: <templa ...
html 图片导出excel,用JavaScript导出图片到Excel
将页面中指定表格的数据导入到Excel中 function AutomateExcel() { var oExcel = new ActiveXObject("Excel.Applicati ...
配置导出MOSS2010列表数据到Excel并根据列表记录自动刷新数据
第一章简介场景描述根据最近客户的需求,他们需要自动维护MOSS2010列表数据导出到Excel的数据实时同步,就是列表添加记录后,导出的Excel列表自动同步数据过来. 第二章配置方法 1. ...

JavaScript导出图片和数据到Excel

JavaScript导出图片和数据到Excel

1、目录结构

2、在页面中引入export2Excel.js文件

3、导出的Excel表格

4、VUE导出

JavaScript导出图片和数据到Excel相关推荐

最新文章

热门文章