前端实现导出excel带图片功能(复制即可用版) |
您所在的位置：网站首页 › 怎么把图片的数据导入到表格里面 › 前端实现导出excel带图片功能(复制即可用版) |
前端实现导出excel带图片功能(复制即可用版)
|
前端实现excel导出，带有图片
前言:本文导出功能介绍现在更新npm包版本:前端实现导出带有图片步骤介绍:导出功能具体实现步骤
前言:本文导出功能介绍
导出带有图片的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 = '{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() } })() 第二步是我们引入上面的那些导出代码，
前端导出文件带有图片的功能按照上面的步骤，负责上面的代码根据自己的需求去修改即可， |
3. 然后我导出功能实现的具体代码【本文地址】
今日新闻 |
推荐新闻 |