前言

js生成.xls的excel文件，本质为生成XML网页
基于对原版的导出进行再次封装，原博主：如何使用纯js导出Excel+export2Excel.js的图片导出(包教包会)
Excle的构造函数：export2Excel(tHeadData, tBodyData, dataName, picWidth, picHeight)
建议使用conf对文件内容进行配置

不足与改进方向

无法指定下载文件的名字
对内容的修改灵活性不足
对office excel的xml了解不够深入

生成效果展示

模块 - `export2Excel_module.js`

// IE Type
const BasicConf = {Type: ["MSIE","Firefox","Chrome","Opera","Safari"],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"><title>{title}</title><!--[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>`,RegexpString: /http/,
};let export2Excel = function(tHeadData, tBodyData, dataName, picWidth, picHeight) {this.explorer;this.idTmr;this.base64;this.format;this.excute(tHeadData, tBodyData, dataName, picWidth, picHeight);
}
export2Excel.prototype = {CleanUp() {window.clearInterval(this.idTmr);},GetExplorerType() {const explorer = window.navigator.userAgent;for(let i of BasicConf.Type){// console.log(i);if(explorer.indexOf(i) >= 0 ) {this.explorer = i;return;}}},JudgeType(data, name) {this.explorer == 'ie' ? this.tableToIE(data,name) : this.tableToNotIE(data,name);return;},tableToIE(data, name) {let curTbl = data,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.xlsx", "Excel Spreadsheets (*.xls), *.xls");}catch(err) {console.log(`Nested catch caught: ${err}`);} finally {oWB.SaveAs(fname);oWB.Close(savechanges = false);//xls.visible = false;oXL.Quit();oXL = null;// 结束excel进程，退出完成window.setInterval(this.Cleanup, 1);this.idTmr = window.setInterval(this.CleanUp, 1);}},excute(tHeadData, tBodyData, dataName, picWidth, picHeight) {const re = BasicConf.RegexpString,th_len = tHeadData.length,tb_len = tBodyData.length;const width = picWidth,height = picHeight;// 添加表头信息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;// exportthis.JudgeType(table, dataName);// console.log(dataName);}}export2Excel.prototype.tableToNotIE = (function() {const uri = BasicConf.URI;const template = BasicConf.template;this.base64 = (event) => window.btoa(unescape(encodeURIComponent(event)));this.format = (str, c) => {// console.log( str.replace(/{(\w+)}/g, (m,p)=>console.log(p)));return str.replace(/{(\w+)}/g,(m, p) => {console.log(c[p]);return c[p];});}return (table, name) => {const ctx = {title: 'fwx',worksheet: name,table};let link = document.createElement('a');link.setAttribute('href', uri + this.base64(this.format(template,ctx)));// console.log(link);link.click();}})();

使用代码

`index.html`

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><!-- <script src="./Excel-/Export2Excel.js"></script> --><!-- <script src="./Excel-/Blob.js"></script> --><script src="./export2Excel_module.js"></script><script src="./main.js"></script>
</body>
</html>

`main.js`

// main.js
// pic
const conf = {pic: "https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2801998497,4036145562&fm=27&gp=0.jpg",picWidth: 40,picHeight: 60,excelWorkBookName: 'test'
};
// header, body
const tHeader = ['flower','color','pic'
];const tBody = [{name: 'rose',color: 'red',pic: conf.pic},{name: 'rose2',color: 'red',pic: conf.pic},{name: 'rose3',color: 'red',pic: conf.pic}
];let test = new export2Excel(tHeader, tBody, conf.excelWorkBookName, conf.picWidth, conf.picHeight);
// export2Excel(tHeader, tBody, 'test')

js-export2Excel.js-带图片excel生成器相关推荐

springboot整合easypoi导入带图片excel并将图片上传到FastDFS服务器
springboot整合easypoi导入带图片excel并将图片上传到FastDFS服务器 1.使用easypoi导入excel 链接: easypoi详细文档. 2.导入easypoi依赖,版本可 ...
apache poi excel显示 base64 图片_数据处理之带图片Excel数据处理解惑
小编最近项目中遇到一个大批量Excel数据提取的问题,因为Excel数据中含有图片,所以在程序处理时遇到了困难,小编花了点时间才解决了这个问题,所以在这里mark一下. 1 问题描述首先来描述一下数 ...
vue+elementui系统利用Export2Excel.js将表格内容导出到excel，并设置表头文字水平垂直居中
写在前面:这是纯前端导出,导出的表格是二级表头,内容是四级单元格(单元格内有四小格),这几个点学会之后应该能适应大部分导出excel的需求了.本次功能记录真实有效.对于之前没接触过导出excel需求的 ...
emoji-mart或者emoji-picker-react实现一个类似于微信聊天的在线发送表情，再加一个带源码的纯js实现，emoji图片本地加载
一. emoji-mart import './App.css'; import React, { Component } from 'react' import 'emoji-mart/css/em ...
vue 基于 Export2Excel.js 导出 Excel
1. 安装两个依赖包 npm install -S file-saver npm install -S xlsx 2. 引入 Export2Excel.js 文件 import { exportJso ...
vue2 使用 Export2Excel.js 前端导出数据为 excel 文件记录
1.将 export2Excel.js 内容复制到项目本地文件中 export2Excel.js 地址: https://github.com/PanJiaChen/vue-element-admin ...
滑动门套滑动门css,JS+CSS实现带小三角指引的滑动门效果
本文实例讲述了JS+CSS实现带小三角指引的滑动门效果.分享给大家供大家参考.具体如下: 这是一款JS+CSS带小三角指引的滑动门,有朋友说在IE6下看不到效果,其实能看到,因为那个小三角颜色比较淡, ...
文档在线预览（四）使用js前端实现word、excel、pdf、ppt 在线预览
文章目录实现方案一.docx文件实现前端预览 1.docx-preview 2.Mammoth 二.PDF文件实现前端预览 1.pdf.js 2.pdfobject.js 3.vue-pdf 4. ...
springboot + 若依 ruoyi + easypoi excel的导入导出（带图片）
springboot + 若依 ruoyi + easypoi excel的导入导出(带图片) 一.官方文档 gitee地址官方文档二.快速开始 1.导入引入依赖 <dependency& ...

js-export2Excel.js-带图片excel生成器

文章目录

前言

不足与改进方向

生成效果展示

模块 - `export2Excel_module.js`

使用代码

`index.html`

`main.js`

js-export2Excel.js-带图片excel生成器相关推荐

最新文章

热门文章

js-export2Excel.js-带图片excel生成器

文章目录

前言

不足与改进方向

生成效果展示

模块 - export2Excel_module.js

使用代码

index.html

main.js

js-export2Excel.js-带图片excel生成器相关推荐

最新文章

热门文章

模块 - `export2Excel_module.js`

`index.html`

`main.js`