基于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 函数式编程的原理
Oct 16 Javascript
js鼠标左右键 键盘值小结
Jun 11 Javascript
JS获取select-option-text_value的方法
Dec 26 Javascript
在jquery中的ajax方法怎样通过JSONP进行远程调用
Apr 04 Javascript
jQuery中使用data()方法读取HTML5自定义属性data-*实例
Apr 11 Javascript
flash+jQuery实现可关闭及重复播放的压顶广告
Apr 15 Javascript
一个php+js实时显示时间问题
Oct 12 Javascript
浅谈js对象的创建和对6种继承模式的理解和遐想
Oct 16 Javascript
Bootstrap基本组件学习笔记之下拉菜单(7)
Dec 07 Javascript
dropload.js插件下拉刷新和上拉加载使用详解
Oct 20 Javascript
vue自定义全局共用函数详解
Sep 18 Javascript
JavaScript this使用方法图解
Feb 04 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文件大小格式化函数合集
2014/03/10 PHP
PHP实现设计模式中的抽象工厂模式详解
2014/10/11 PHP
windows中为php安装mongodb与memcache
2015/01/06 PHP
php发送短信验证码完成注册功能
2015/11/24 PHP
PHP将数据导出Excel表中的实例(投机型)
2017/07/31 PHP
tp5(thinkPHP5)操作mongoDB数据库的方法
2018/01/20 PHP
php 多继承的几种常见实现方法示例
2019/11/18 PHP
js获取本机的外网/广域网ip地址完整源码
2013/08/12 Javascript
验证码在IE中不刷新而谷歌等浏览器正常的解决方案
2014/03/18 Javascript
jquery实现不同大小浏览器使用不同的css样式表的方法
2014/04/02 Javascript
javascript+HTML5的canvas实现七夕情人节3D玫瑰花效果代码
2015/08/04 Javascript
JavaScript的Backbone.js框架入门学习指引
2016/05/07 Javascript
javascript显示倒计时控制按钮的简单实现
2016/06/07 Javascript
针对BootStrap中tabs控件的美化和完善(推荐)
2016/07/06 Javascript
Vue.js一个文件对应一个组件实践
2016/10/27 Javascript
JS判断一个数是否是水仙花数
2017/06/11 Javascript
VUE中使用Vue-resource完成交互
2017/07/21 Javascript
利用vue + koa2 + mockjs模拟数据的方法教程
2017/11/22 Javascript
ios设备中angularjs无法改变页面title的解决方法
2018/09/13 Javascript
Vue循环组件加validate多表单验证的实例
2018/09/18 Javascript
详解基于Wepy开发小程序插件(推荐)
2019/08/01 Javascript
浅谈webpack构建工具配置和常用插件总结
2020/05/11 Javascript
原生JS实现京东查看商品点击放大
2020/12/21 Javascript
pycharm执行python时,填写参数的方法
2018/10/29 Python
Python自动化之数据驱动让你的脚本简洁10倍【推荐】
2019/06/04 Python
使用Python串口实时显示数据并绘图的例子
2019/12/26 Python
Python如何输出警告信息
2020/07/30 Python
举例详解CSS3中的Transition
2015/07/15 HTML / CSS
Merrell迈乐澳大利亚网站:购买户外登山鞋
2017/05/28 全球购物
高中毕业自我鉴定范文
2013/10/02 职场文书
行政前台岗位职责
2013/12/04 职场文书
治安消防安全责任书
2014/07/23 职场文书
北京英语导游词
2015/02/12 职场文书
电影复兴之路观后感
2015/06/02 职场文书
2016年春节问候语
2015/11/11 职场文书
基于CSS3画一个iPhone
2021/04/21 HTML / CSS