基于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 相关文章推荐
js判断上传文件的类型和大小示例代码
Oct 18 Javascript
JavaScript使用DeviceOne开发实战(三)仿微信应用
Dec 02 Javascript
javascript执行环境及作用域详解
May 05 Javascript
AngularJs ng-route路由详解及实例代码
Sep 14 Javascript
vue双向数据绑定知识点总结
Apr 18 Javascript
工作中常用到的ES6语法
Sep 04 Javascript
解决vue同一slot在组件中渲染多次的问题
Sep 06 Javascript
判断iOS、Android以及PC端的示例代码
Nov 15 Javascript
vue项目中axios请求网络接口封装的示例代码
Dec 18 Javascript
vue防止花括号{{}}闪烁v-text和v-html、v-cloak用法示例
Mar 13 Javascript
一篇文章弄懂javascript中的执行栈与执行上下文
Aug 09 Javascript
JavaScript组合继承详解
Nov 07 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与SQL注入攻击[三]
2007/04/17 PHP
深入eAccelerator与memcached的区别详解
2013/06/06 PHP
PHP Smarty模版简单使用方法
2016/03/30 PHP
PHP封装XML和JSON格式数据接口操作示例
2019/03/06 PHP
PHPstorm激活码2020年5月13日亲测有效
2020/09/17 PHP
Avengerls vs KG BO3 第一场2.18
2021/03/10 DOTA
[原创]站长必须要知道的javascript广告代码
2007/05/30 Javascript
JavaScript 基础篇之对象、数组使用介绍(三)
2012/04/07 Javascript
Knockoutjs的环境搭建教程
2012/11/26 Javascript
对 jQuery 中 data 方法的误解分析
2014/06/18 Javascript
js实现带农历和八字等信息的日历特效
2016/05/16 Javascript
jQuery基础知识点总结(必看)
2016/05/31 Javascript
React Native实现地址挑选器功能
2017/10/24 Javascript
Vue 中mixin 的用法详解
2018/04/23 Javascript
javaScript实现游戏倒计时功能
2018/11/17 Javascript
vue跳转方式(打开新页面)及传参操作示例
2020/01/26 Javascript
利用python发送和接收邮件
2016/09/27 Python
Python3之读取连接过的网络并定位的方法
2018/04/22 Python
python实现一组典型数据格式转换
2018/12/15 Python
python、PyTorch图像读取与numpy转换实例
2020/01/13 Python
python numpy--数组的组合和分割实例
2020/02/24 Python
基于Python的自媒体小助手---登录页面的实现代码
2020/06/29 Python
Python爬虫之爬取淘女郎照片示例详解
2020/07/28 Python
Python 如何调试程序崩溃错误
2020/08/03 Python
浅析与CSS3的loading动画加载相关的transition优化
2015/05/18 HTML / CSS
Lookfantastic香港官网:英国知名美妆购物网站
2018/06/19 全球购物
Janie and Jack美国官网:GAP旗下的高档童装品牌
2019/09/09 全球购物
医学专业个人求职自荐信格式
2013/09/23 职场文书
素食餐饮项目创业计划书
2014/02/02 职场文书
酒店仓管员岗位职责
2014/04/28 职场文书
大学生学习新党章思想汇报
2014/10/25 职场文书
2014年基建工作总结
2014/12/12 职场文书
学校重阳节活动总结
2015/03/24 职场文书
个人催款函范文
2015/06/23 职场文书
导游带团欢迎词
2015/09/30 职场文书
会计专业2019暑假实习报告
2019/06/21 职场文书