如何使用纯js导出Excel+export2Excel.js的图片导出(包教包会) |
您所在的位置：网站首页 › vue文件导出excel在ie浏览器提示文件过大 › 如何使用纯js导出Excel+export2Excel.js的图片导出(包教包会) |
如何使用纯js导出Excel+export2Excel.js的图片导出(包教包会)
|
需求背景
有一天突发奇想，如果把导出excel放到前端去做会不会更加的简单一些呢，这样对数据库的访问也会比较少，然后就开始前端导出excel的探索。后来发现，如果业务量大，需求变更频繁，兼容问题，好像前端处理并不合适，但是还是记录下来。 js导出文本Excel这里主要使用csv后缀的简单业务实现 HTML代码 Excel表格下载2 JS代码 $scope.downLoadExcel = function(item){ //这里循环主要是导出指定的字段，不需要的话就直接把集合扔进来用就行 var list=[]; $.each(item,function(i,obj){ var all={}; all["id"]=i+1; all["createTime"]=obj.createTime; list.push(all) }) //列标题，逗号隔开，每一个逗号就是隔开一个单元格 let str = `编号,创建时间\n`; //增加\t为了不让表格显示科学计数法或者其他格式 for(let i = 0 ; i < list.length ; i++ ){//同上list,可直接传入后台的参数名 for(let item in list[i]){//同上list,可直接传入后台的参数名 str+=`${list[i][item] + '\t'},`; //同上list,可直接传入后台的参数名 } str+='\n'; } //encodeURIComponent解决中文乱码 let uri = 'data:text/csv;charset=utf-8,\ufeff' + encodeURIComponent(str); //通过创建a标签实现 var link = document.createElement("a"); link.href = uri; //对下载的文件命名 link.download = "导出.csv"; document.body.appendChild(link); link.click(); }); 效果展示
点击下载按钮后然后会弹出下载
打开excel就可以发现我们的数据了
单纯的导出文字可能不满足业务需求，有时候可能会要求你导出图片，如果直接把链接导出，Js并不能帮你解析，最后还是只能得到一串Url路径。这时候三方Js他来啦，满足你当前要求。 export2Excel.js导出带图片excel HTML代码 导出图片和数据到Excel // 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, '我爱花朵') export2Excel.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 = '{table}', 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(); } })() JS代码 // 导出函数 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 = '' for (let i = 0; i < th_len; i++) { thead += '' + theadData[i] + '' } thead += '' // 添加每一行数据 let tbody = '' for (let i = 0; i < tb_len; i++) { tbody += '' let row = tbodyData[i] // 获取每一行数据 for (let key in row) { if (re.test(row[key])) { // 如果为图片，则需要加div包住图片 // tbody += '展示效果
|
【本文地址】
今日新闻 |
推荐新闻 |