当前位置：移动技术网 > IT编程>开发语言>JavaScript > 基于JS实现table导出Excel并保留样式

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

2020年06月23日 | 移动技术网IT编程 | 我要评论

英语六级真题答案,范绍慧,用名字查身份证号码

浏览器环境：谷歌浏览器

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

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

效果：

完整代码：

<!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>

完整代码

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持移动技术网。

您可能感兴趣的文章:

如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！点击进行留言回复

微信小程序开发打开另一个小程序的实现方法

微信小程序打开另一个小程序，有两种方法：1.超链接；2.点击按钮。全局配置：跳转到其他小程序，需要在当前小程序全局配置中配置需要跳转的小程序列表,代码如下：ap... [阅读全文]
Javascript实现简易天数计算器

本文实例为大家分享了javascript实现简易天数计算器的具体代码，供大家参考，具体内容如下效果图：功能：1. 支持选择日期； 2. 自动计算闰年； 3. ... [阅读全文]
怎么理解wx.navigateTo的events参数使用详情

遇到一个这样的业务需求, 用户点击提现按钮, 跳转到提现处理结果页面, 为了避免提现请求被重复提交, 所以需要在用户点击了提交按钮以后就把按钮锁起来不给用户提交... [阅读全文]
微信小程序手动添加收货地址省市区联动

本文实例为大家分享了微信小程序手动添加收货地址省市区联动的具体代码，供大家参考，具体内容如下先看效果图html部分用小程序的piceker-view 嵌入页面的... [阅读全文]
微信jssdk踩坑之签名错误invalid signature

最近做公众号网页开发，使用微信 jssdk 页面签名时 ios 中一直报错，这才刚开始就被这只拦路虎拦住了，报错如下：然而 android 和开发者工具中好得很... [阅读全文]
基于js实现数组相邻元素上移下移

实现效果：即需要实现当前元素与相邻元素交换位置，当上移时，则是当前元素与上一元素调换位置；当下移时，则是当前元素与下一元素调换位置。实现代码：js://点击上移... [阅读全文]
JS使用for in有序获取对象数据

需要遍历对象，将key value分为两个数组，可以使用forin，但是获取到的对象中的属性及属性值排列是无序的，目的是要按顺序取出对象中的key和value值... [阅读全文]
单线程JavaScript实现异步过程详解

前两天硬着头皮在部门内部做了一次技术分享，主题如题。索性整理成文章留个纪念！要了解异步实现，首先我们得先了解：同步 & 异步同步：会逐行执行代码，会对后... [阅读全文]
JS加载解析Markdown文档过程详解

网上有很多网站会通过.md文档来做页面内容，很好奇，这是怎么做的？出于好奇，建了一个test.md文件：# hello world! asdfa asd *斜体... [阅读全文]
基于JS实现table导出Excel并保留样式

浏览器环境：谷歌浏览器1.在导出excel的时候，保存table的样式，有2种方法，①是在table的行内写style样式，②是在模板里面添加样式2.第一种方式... [阅读全文]

网友评论


验证码：

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

2020年06月23日 | 移动技术网IT编程 | 我要评论

您可能感兴趣的文章:

相关文章:

网友评论