欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

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

程序员文章站 2022-03-21 12:47:42
浏览器环境：谷歌浏览器1.在导出excel的时候，保存table的样式，有2种方法，①是在table的行内写style样式，②是在模板里面添加样式2.第一种方式：行内添加样式公司一...

浏览器环境：谷歌浏览器

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>

完整代码

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

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

上一篇： Java和Scala集合间的相互转换方式

下一篇： PHP数据源架构模式之表入口模式实例分析

推荐阅读