基于JS实现table导出Excel并保留样式


Posted in Javascript onMay 19, 2020

浏览器环境:谷歌浏览器

1.在导出Excel的时候,保存table的样式,有2种方法,①是在table的行内写style样式,②是在模板里面添加样式

2.第一种方式:行内添加样式

<td>公司一</td>

效果:

基于JS实现table导出Excel并保留样式

完整代码:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    table td {
      font-size: 12px;
      width: 200px;
      height: 30px;
      text-align: center;
      background-color: #4f891e;
      color: #ffffff;
    }
  </style>
</head>
<body>
<a download="table导出Excel" id="excelOut" href="#" rel="external nofollow" rel="external nofollow" >table导出Excel</a>
<table cellspacing="0" cellpadding="0" border="1" id="tableToExcel">
  <thead>
  <tr>
    <td style="font-size: 18px">公司一</td>
    <td>公司二一</td>
    <td>公司三</td>
  </tr>
  </thead>
  <tbody>
  <tr>
    <td>A公司</td>
    <td>B公司</td>
    <td>C公司</td>
  </tr>
  <tr>
    <td>A公司</td>
    <td>B公司</td>
    <td>C公司</td>
  </tr>
  <tr>
    <td>A公司</td>
    <td>B公司</td>
    <td>C公司</td>
  </tr>
  <tr>
    <td colspan="3">共计</td>
  </tr>
  </tbody>
</table>
<script>
  window.onload = function () {
    tableToExcel('tableToExcel', '下载模板')
  };
  //base64转码
  var base64 = function (s) {
    return window.btoa(unescape(encodeURIComponent(s)));
  };
  //替换table数据和worksheet名字
  var format = function (s, c) {
    return s.replace(/{(\w+)}/g,
      function (m, p) {
        return c[p];
      });
  }
  function tableToExcel(tableid, sheetName) {
    var uri = 'data:application/vnd.ms-excel;base64,';
    var 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><!--[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]-->' +
      ' <style type="text/css">' +
      'table td {' +
      'border: 1px solid #000000;' +
      'width: 200px;' +
      'height: 30px;' +
      ' text-align: center;' +
      'background-color: #4f891e;' +
      'color: #ffffff;' +
      ' }' +
      '</style>' +
      '</head><body ><table class="excelTable">{table}</table></body></html>';
    if (!tableid.nodeType) tableid = document.getElementById(tableid);
    var ctx = {worksheet: sheetName || 'Worksheet', table: tableid.innerHTML};
    document.getElementById("excelOut").href = uri + base64(format(template, ctx));
  }

</script>
</body>
</html>

3.第二种方式:在模板里面里面添加样式

在这里面添加的样式excel就能找到和识别了

var 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><!--[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]-->' +
      ' <style type="text/css">' +
      'table td {' +
      'border: 1px solid #000000;' +
      'width: 200px;' +
      'height: 30px;' +
      ' text-align: center;' +
      'background-color: #4f891e;' +
      'color: #ffffff;' +
      ' }' +
      '</style>' +
      '</head><body ><table class="excelTable">{table}</table></body></html>';

完整代码:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    table td {
      font-size: 12px;
      width: 200px;
      height: 30px;
      text-align: center;
      background-color: #4f891e;
      color: #ffffff;
    }
  </style>
</head>
<body>
<a download="table导出Excel" id="excelOut" href="#" rel="external nofollow" rel="external nofollow" >table导出Excel</a>
<table cellspacing="0" cellpadding="0" border="1" id="tableToExcel">
  <thead>
  <tr>
    <td >公司一</td>
    <td>公司二一</td>
    <td>公司三</td>
  </tr>
  </thead>
  <tbody>
  <tr>
    <td>A公司</td>
    <td>B公司</td>
    <td>C公司</td>
  </tr>
  <tr>
    <td>A公司</td>
    <td>B公司</td>
    <td>C公司</td>
  </tr>
  <tr>
    <td>A公司</td>
    <td>B公司</td>
    <td>C公司</td>
  </tr>
  <tr>
    <td colspan="3">共计</td>
  </tr>
  </tbody>
</table>
<script>
  window.onload = function () {
    tableToExcel('tableToExcel', '下载模板')
  };
  //base64转码
  var base64 = function (s) {
    return window.btoa(unescape(encodeURIComponent(s)));
  };
  //替换table数据和worksheet名字
  var format = function (s, c) {
    return s.replace(/{(\w+)}/g,
      function (m, p) {
        return c[p];
      });
  }
  function tableToExcel(tableid, sheetName) {
    var uri = 'data:application/vnd.ms-excel;base64,';
    var 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><!--[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]-->' +
      ' <style type="text/css">' +
      'table td {' +
      'border: 1px solid #000000;' +
      'width: 200px;' +
      'height: 30px;' +
      ' text-align: center;' +
      'background-color: #4f891e;' +
      'color: #ffffff;' +
      ' }' +
      '</style>' +
      '</head><body ><table class="excelTable">{table}</table></body></html>';
    if (!tableid.nodeType) tableid = document.getElementById(tableid);
    var ctx = {worksheet: sheetName || 'Worksheet', table: tableid.innerHTML};
    document.getElementById("excelOut").href = uri + base64(format(template, ctx));
  }

</script>
</body>
</html>

完整代码

注意:如果同时添加了行内样式和模板样式,行内的样式会覆盖模板的样式

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript的面向对象方法以及差别
Mar 31 Javascript
js中将HTMLCollection/NodeList/伪数组转换成数组的代码
Jul 31 Javascript
jquery利用ajax调用后台方法实例
Aug 23 Javascript
扩展JS Date对象时间格式化功能的小例子
Dec 02 Javascript
JS(JQuery)操作Array的相关方法介绍
Feb 11 Javascript
鼠标悬停小图标显示大图标
Jan 22 Javascript
js获取Html元素的实际宽度高度的方法
May 19 Javascript
再谈Javascript中的异步以及如何异步
Aug 19 Javascript
Ajax+FormData+javascript实现无刷新表单信息提交
Oct 24 Javascript
原生js编写焦点图效果
Dec 08 Javascript
快速解决select2在bootstrap模态框中下拉框隐藏的问题
Aug 10 Javascript
JS集合set类的实现与使用方法示例
Feb 01 Javascript
vue利用全局导航守卫作登录后跳转到未登录前指定页面的实例代码
May 19 #Javascript
jQuery 函数实例分析【函数声明、函数表达式、匿名函数等】
May 19 #jQuery
JS加载解析Markdown文档过程详解
May 19 #Javascript
bootstrapValidator表单校验、更改状态、新增、移除校验字段的实例代码
May 19 #Javascript
jQuery 常用特效实例小结【显示与隐藏、淡入淡出、滑动、动画等】
May 19 #jQuery
jQuery AJAX应用实例总结
May 19 #jQuery
单线程JavaScript实现异步过程详解
May 19 #Javascript
You might like
PHP查看当前变量类型的方法
2015/07/31 PHP
PHP创建文件,并向文件中写入数据,覆盖,追加的实现代码
2016/03/25 PHP
javascript一些不错的函数脚本代码
2008/09/10 Javascript
js href的用法
2010/05/13 Javascript
jquery json 实例代码
2010/12/02 Javascript
js读取csv文件并使用json显示出来
2015/01/09 Javascript
浅谈JQuery+ajax+jsonp 跨域访问
2016/06/25 Javascript
微信小程序 侧滑删除(左滑删除)
2017/05/23 Javascript
BootStrap Table 后台数据绑定、特殊列处理、排序功能
2017/05/27 Javascript
Vue2.0 组件传值通讯的示例代码
2017/08/01 Javascript
vue绑定设置属性的多种方式(5)
2017/08/16 Javascript
详解webpack4多入口、多页面项目构建案例
2018/05/25 Javascript
vue实现element-ui对话框可拖拽功能
2018/08/17 Javascript
在element-ui的el-tree组件中用render函数生成el-button的实例代码
2018/11/05 Javascript
layui上传图片到服务器的非项目目录下的方法
2019/09/26 Javascript
vue实现设置载入动画和初始化页面动画效果
2019/10/28 Javascript
原生js实现滑块区间组件
2021/01/20 Javascript
[52:44]VGJ.T vs infamous Supermajor小组赛D组败者组第一轮 BO3 第一场 6.3
2018/06/04 DOTA
[36:33]完美世界DOTA2联赛PWL S2 LBZS vs Forest 第二场 11.29
2020/12/02 DOTA
python读取word文档的方法
2015/05/09 Python
python结合opencv实现人脸检测与跟踪
2015/06/08 Python
windows下python 3.6.4安装配置图文教程
2018/08/21 Python
Python线程下使用锁的技巧分享
2018/09/13 Python
PyGame贪吃蛇的实现代码示例
2018/11/21 Python
django多对多表的创建,级联删除及手动创建第三张表
2019/07/25 Python
python选取特定列 pandas iloc,loc,icol的使用详解(列切片及行切片)
2019/08/06 Python
Python 切分数组实例解析
2019/11/07 Python
Tensorflow Summary用法学习笔记
2020/01/10 Python
解决python运行启动报错问题
2020/06/01 Python
突破canvas语法限制 让他支持链式语法
2012/12/24 HTML / CSS
转预备党员政审材料
2014/02/06 职场文书
报纸媒体创意广告词
2014/03/17 职场文书
六个一活动实施方案
2014/03/21 职场文书
党的群众路线教育实践活动公开承诺书
2014/03/28 职场文书
2015年仓管员工作总结
2015/04/21 职场文书
修辞手法有哪些?
2019/08/29 职场文书