基于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 相关文章推荐
Eclipse下jQuery文件报错出现错误提示红叉
Jan 13 Javascript
Jquery遍历Json数据的方法
Apr 20 Javascript
JavaScript中的some()方法使用详解
Jun 09 Javascript
详解js图片轮播效果实现原理
Dec 17 Javascript
再谈javascript注入 黑客必备!
Sep 14 Javascript
详解React Native网络请求fetch简单封装
Aug 10 Javascript
服务端预渲染之Nuxt(使用篇)
Apr 08 Javascript
优化Vue中date format的性能详解
Jan 13 Javascript
有趣的JavaScript隐式类型转换操作实例分析
May 02 Javascript
在vue中created、mounted等方法使用小结
Jul 21 Javascript
使用Mock.js生成前端测试数据
Dec 13 Javascript
ES2020让代码更优美的运算符 (?.) (??)
Jan 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 的加密函数 md5,crypt,base64_encode 等使用介绍
2012/04/09 PHP
PHP实现对png图像进行缩放的方法(支持透明背景)
2015/07/15 PHP
举例详解PHP脚本的测试方法
2015/08/05 PHP
Laravel中服务提供者和门面模式的入门介绍
2017/11/06 PHP
php实现生成PDF文件的方法示例【基于FPDF类库】
2018/07/21 PHP
判断某个字符在一个字符串中是否存在的js代码
2014/02/28 Javascript
JavaScript的jQuery库插件的简要开发指南
2015/08/12 Javascript
echarts学习笔记之箱线图的分析与绘制详解
2017/11/22 Javascript
详解React之父子组件传递和其它一些要点
2018/06/25 Javascript
angularjs的单选框+ng-repeat的实现方法
2018/09/12 Javascript
ElementUI radio组件选中小改造
2019/08/12 Javascript
python网络编程之TCP通信实例和socketserver框架使用例子
2014/04/25 Python
Python简单实现子网掩码转换的方法
2016/04/13 Python
使用python接入微信聊天机器人
2020/03/31 Python
python实现切割url得到域名、协议、主机名等各个字段的例子
2019/07/25 Python
pandas中DataFrame修改index、columns名的方法示例
2019/08/02 Python
python爬取Ajax动态加载网页过程解析
2019/09/05 Python
python PIL/cv2/base64相互转换实例
2020/01/09 Python
Python 找出英文单词列表(list)中最长单词链
2020/12/14 Python
CSS3提交意见输入框样式代码
2014/10/30 HTML / CSS
瑞典时尚耳机品牌:Urbanears
2017/07/26 全球购物
For Art’s Sake官网:手工制作的奢华眼镜
2018/12/15 全球购物
印尼在线购买隐形眼镜网站:Lensza.co.id
2019/04/27 全球购物
日本最大的彩色隐形眼镜销售网站:CharmColor
2020/09/09 全球购物
什么是唯一索引
2015/07/05 面试题
代码中finally中的代码会不会执行
2012/02/06 面试题
国际贸易个人求职信范文
2014/01/04 职场文书
创业计划书撰写原则
2014/01/25 职场文书
违反工作纪律检讨书
2014/02/15 职场文书
股东出资证明书(正规版)
2014/09/24 职场文书
2014小学语文教师个人工作总结
2014/12/03 职场文书
投资意向协议书
2015/01/29 职场文书
教师节老师寄语
2015/05/28 职场文书
导游词之千岛湖
2019/09/23 职场文书
关于flex 上下文中自动 margin的问题(完整例子)
2021/05/20 HTML / CSS
用JS写一个发布订阅模式
2021/11/07 Javascript