Html Table用JS导出excel格式问题

我在网上找的JS把HTML Tabel导出成EXCEL。但是如果Table里的数字内容为0开的的导成Excel后会自动删除0,我想以text的格式写入Excel,不知道如何操作呀?
HTML代码如下

<table id="dataTable">
    <tr>
       <td><label class="text">000412341234</label></td>
       <td><label class="text">600683124123</label></td>
</table>

JS代码

var tableToExcel = (function() {
  var uri = 'data:application/vnd.ms-excel;base64,'
    , 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]--></head><body><table>{table}</table></body></html>'
    , base64 = function(s) { return window.btoa(unescape(encodeURIComponent(s))) }
    , format = function(s, c) { return s.replace(/{(\w+)}/g, function(m, p) { return c[p]; }) }
  return function(table, name) {
    if (!table.nodeType) table = document.getElementById(table)
    var ctx = {worksheet: name || 'Worksheet', table: table.innerHTML}
    window.location.href = uri + base64(format(template, ctx))
  }
})()

导出EXCEL后单元格里的000412341234会变成412341234,有没有大神帮忙看看~

我找到解决方法了在td里加个style就行了style='mso-number-format:"\@" 强制转换为text格式

 
<td style='mso-number-format:"\@"'><label class="text">000412341234</label></td>

https://segmentfault.com/q/1010000009987847

web利用table表格生成excel格式问题

 

当我们把web页面上的table导成excel形式时,有时候我们的数据需要以特定的格式呈现出来,这时候我们就需要给指定的单元格添加一些样式规格信息。

文本:vnd.ms-excel.numberformat:@

日期:vnd.ms-excel.numberformat:yyyy/mm/dd

数字:vnd.ms-excel.numberformat:#,##0.00

货币:vnd.ms-excel.numberformat:¥#,##0.00

百分比:vnd.ms-excel.numberformat: #0.00%

在excel中我们要输入较长的数字时需要加一个单引号以转成文本,但是通过asp.net 生成的html中如果加上单引号会被直接输出,这时我们就需要在相应的td上加上以上的文本样式即可

这些格式你也可以自定义,比如年月你可以定义为:yy-mm  等等。

js导出excel增加表头、mso-number-format定义数据格式

 

问题1:增加表头  

  js导出表格时,只会导出table里的展现出的内容,如需增加表头等内容需要在页面获取的字符串中拼接表头的相关字符串,详细介绍如下:

  

tableString:新增的表头内容字符串;

ctx.table: 新增的表头+页面获取的table字符串。

这样,表头就加上了,还可以通过style设置它的样式:

  

问题2:mso-number-format定义数据格式 

  在做项目时遇到mso-number-format定义的科学计数法转化格式与金额定义的向右对齐样式有冲突。

   之前有写过篇博客专门记述mso-number-format定义科学计数法转化格式。当使用这种方法导出文件时,有时会遇到一个问题,就是导出的Excel经常会把我们的数据自动识别为其他格式,例如只有纯数字的字段在导出到 Excel后会被自动识别为数字格式,而一旦数字超过11位,Excel便会将其以科学计数法的形式来显示,比如身份证号码,带区号的电话号码等。

  mso-number-format的属性设置书写如下:

1
<td style='mso-number-format:\"\@\";' class='tdRight'>

 class='tdRight' 是设置右对齐样式,这样就有冲突,class定义的样式不起作用。要想避免冲突,正确的写法是:

1
<td style='mso-number-format:\"\@\"; text-align:right;' class='tdRight'>"

  只需要把样式都写在style里即可,是不是简单的让人抓狂。

  注意:class='tdRight' 不可以去掉,因为此处的td是通过append到页面的,页面的样式还需要class来定义向右对齐。

补充:

  当table页面中有个别不想被打印出来的,只需要将这个元素隐藏起来即可,但有些按钮、复选框向下图这样,即使隐藏也还会显示:

打印出来是酱紫:

  办法就是将复选框等remove掉,在打印之后页面再重新加载数据渲染复选框等,可能性能方面存在问题,暂时先这样解决,以后有更好的方法再更新。

下面把mso-number-format 定义数据格式的css样式罗列下:

mso-number-format:"0" NO Decimals 
mso-number-format:"0\.000" 3 Decimals 
mso-number-format:"\#\,\#\#0\.000" Comma with 3 dec 
mso-number-format:"mm\/dd\/yy" Date7 
mso-number-format:"mmmm\ d\,\ yyyy" Date9 
mso-number-format:"m\/d\/yy\ h\:mm\ AM\/PM" D -T AMPM 
mso-number-format:"Short Date" 01/03/1998 
mso-number-format:"Medium Date" 01-mar-98 
mso-number-format:"d\-mmm\-yyyy" 01-mar-1998 
mso-number-format:"Short Time" 5:16 
mso-number-format:"Medium Time" 5:16 am 
mso-number-format:"Long Time" 5:16:21:00 
mso-number-format:"Percent" Percent - two decimals 
mso-number-format:"0%" Percent - no decimals 
mso-number-format:"0\.E+00" Scientific Notation 
mso-number-format:"\@" Text  (目前只用过)
mso-number-format:"\#\ ???\/???" Fractions - up to 3 digits (312/943)

目前只用过mso-number-format:"\@" 

在导出的表格中显示为文本格式。

 
 
 
 
https://blog.csdn.net/meunsina/article/details/40740203
 
 
 
 
 
 
 
 
 
修改数字输出格式,直接输出的
<td style="mso-number-format:''\@'';">' || NVL(L_H.E_NUMBER, '&nbsp') ||
'
如果在BI Pulbisher 报表Excel输出身份证号想不显示科学技术法,可以通过修改定义 的rtf模板实现,具体如下:
找到身份证号代码,右键点击属性->添加帮助文字,可看到在自动键入栏位的内容如下 :
<?NATIONAL_IDENTIFIER?>
将其修改为:
<fo:bidi-override direction="ltr" unicode-bidi="bidi-override"><? NATIONAL_IDENTIFIER ?></fo:bidi-override>

在简易的Jsp导出html版本的execl中所有的文件导出默认都是文本文件,这给业务人员带来了一些不必要的操作,建议使用下面的方法,可以调整导出的格式类型.

mso-number-format:"    NO Decimals
mso-number-format: Decimals
mso-number-format: dec
mso-number-format:"mm\/dd\/yy"    Date7
mso-number-format:"mmmm\ d\,\ yyyy"    Date9
mso-number-format:"m\/d\/yy\ h\:mm\ AM\/PM"    D -T AMPM
mso-number-format://
mso-number-format:-mar-
mso-number-format:-mar-
mso-number-format::
mso-number-format:: am
mso-number-format::::
mso-number-format:"Percent"    Percent - two decimals
mso-number-format:"0%"    Percent - no decimals
mso-number-format:"0\.E+00"    Scientific Notation
mso-number-format:"\@"    Text
mso-number-format: digits (/)
mso-number-format:"\0022£\0022\#\,\#\#0\.00"    £12.76
mso-number-format:"\#\,\#\#0\.00_ \;
Red
\-\#\,\#\#\.\ "
 decimals, negative numbers in red and signed
(1.56 -1.56)
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 ExportBankDayTypeOfOrder() {

    //var sel_BankDayTypeOfOrder_Department = $("#sel_BankDayTypeOfOrder_Department").val();
    //var sel_BankDayTypeOfOrder_CustomerName = $("#sel_BankDayTypeOfOrder_CustomerName").val();
    //var DailyorMonthly = $("#DailyorMonthly").val();
    //var sel_ATMOrder_Month = $("#sel_ATMOrder_Month").val();
    //var startdate = $("#startdate").val();
    //var enddate = $("#enddate").val();
    //location.href = "/Plan/Replenishment/ExportBankDayTypeOfOrders?projecte=" + sel_BankDayTypeOfOrder_Department + "&CustomerName=" + sel_BankDayTypeOfOrder_CustomerName + "&DailyorMonthly=" + DailyorMonthly + "&sel_ATMOrder_Month=" + sel_ATMOrder_Month + "&startdate=" + startdate + "&enddate=" + enddate;
    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: #FFFFFF;' +
        'color: #000000;' +
        'mso-number-format:"\@";' +   //shishi
        ' }' +
        '</style>' +
        '</head><body ><table class="excelTable">{table}</table></body></html>';
    tableid = "dataTableBankDayTypeOfOrder";
    var date = new Date();
    sheetName = "Summary of Order" + date.getYear() + date.getMonth() + date.getDate() + date.getHours() + date.getMinutes() + date.getSeconds();
    $("#BTNEXCEL1").attr("download", sheetName);
    if (!tableid.nodeType) tableid = document.getElementById(tableid);
    var ctx = { worksheet: "Rep - Summary of order" || 'Worksheet', table: tableid.innerHTML };
    document.getElementById("BTNEXCEL1").href = uri + base64(format(template, ctx));
    //location.href = uri + base64(format(template, ctx));
}

<a class="btn btn-w-m btn-info " id="BTNEXCEL1" href="#" download="SummaryExcel" onclick="ExportBankDayTypeOfOrder()">@LangResources.Resource.ExportAccount</a>
 
 
												

Html Table用JS导出excel格式问题 导出EXCEL后单元格里的000412341234会变成412341234 7-14 会变成 2018-7-14(7月14) 自定义格式 web利用table表格生成excel格式问题 js导出excel增加表头、mso-number-format定义数据格式 数字输出格式转换 mso-number-format:"\@"的更多相关文章

  1. 【原创】.NET读写Excel工具Spire.Xls使用(3)单元格控制

                  本博客所有文章分类的总目录:http://www.cnblogs.com/asxinyu/p/4288836.html .NET读写Excel工具Spire.Xls使用文章 ...

  2. Excel 批量快速合并相同的单元格:数据透视表、宏代码、分类汇总

    Excel 批量快速合并相同的单元格   在制作Excel表格的时候,为了使得自己制作的报表更加简洁明了,方便查阅,经常需要合并很多相同的单元格,如果有几千几万条记录需要合并的话,真的会让人发疯.怎样 ...

  3. C#操作Excel的技巧与方法 设置单元格等

    C#操作Excel可以分为客户端和插件版本,区别就是是否需要Excel环境,功能实现一样 一.通用操作与处理(有点乱有时间再整理) 1:工程对excel类库的导入,如: c:\program file ...

  4. excel如何设置输入数字后单元格自动填充颜色

    在使用excel的过程中,有时需要在输入数字时,突出显示这些单元格,突出显示可以用有填充颜色的单元格来表示.为了实现这样的效果,需要借助excel的条件格式. 工具/原料 电脑 Excel 2010 ...

  5. Excel VBA入门(八)单元格边框

    本文基于以下文件 http://pan.baidu.com/s/1nvJtsu9 (部分)内容预览: 1. 边框样式 Sub cell_format() Dim sht As Worksheet Di ...

  6. excel把按行合并的单元格重新拆分

    前言 今天帮朋友弄她excel表格的数据,发现excel表格合并之后,再拆分就不再同一行里面了,导致后面想要拆分回来非常头痛,如下图(下面的数据是模拟的): 可以看到第一例和其他例中间部分为合并的,此 ...

  7. Excel 2003 中如何用VBA 代码访问单元格里的值及操作单元格 - 唐诗宋词的专栏 - 博客频道 - CSDN.NET

    在Excel 中编写VBA 代码,最常做的事可能就是操作表单中单元格里的数据. 我这里总结一下如何从VBA 代码中操作单元格的数据. 在VBA 代码中操作单元格需要用到Range 对象,Range 是 ...

  8. web利用table表格生成excel格式问题

    当我们把web页面上的table导成excel形式时,有时候我们的数据需要以特定的格式呈现出来,这时候我们就需要给指定的单元格添加一些样式规格信息. 文本:vnd.ms-excel.numberfor ...

  9. EXCEL在改动某几个单元格时隐藏空列

    概述 今天我哥来找我帮他搞下excel表格,本着程序猿对程序无所不能的精神,我爽快的答应了.结果查了半天才搞定.现在记录在此,供自己以后参考,相信对其他人也有用. PS:这几天正在弄博客,马上就要弄完 ...

随机推荐

  1. django web 自定义通用权限控制

    需求:web系统有包含以下5个url,分别对于不同资源: 1.stu/add_stu/ 2.stu/upload_homework/ 3.stu/query_homework/ 4.stu/add_r ...

  2. CF 1005B Delete from the Left 【模拟数组操作/正难则反】

    You are given two strings s and t. In a single move, you can choose any of two strings and delete th ...

  3. notepad++ 开始和结尾

    作者:zecy链接:https://www.zhihu.com/question/37708379/answer/73181634来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注 ...

  4. 数据结构-二叉搜索树(BST binary search tree)

    本文由@呆代待殆原创,转载请注明出处:http://www.cnblogs.com/coffeeSS/ 二叉搜索树简介 顾名思义,二叉搜索树是以一棵二叉树来组织的,这样的一棵树可以用一个链表数据结构来 ...

  5. 【博弈论】【SG函数】bzoj1777 [Usaco2010 Hol]rocks 石头木头

    仅有距根节点为奇数距离的节点的石子被移走对答案有贡献,∵即使偶数的石子被移走,迟早会被再移到奇数,而奇数被移走后,不一定能够在移到偶数(到根了). 最多移L个:石子数模(L+1),比较显然,也可以自己 ...

  6. mac Nginx + FastCgi + Spawn-fcgi + c++

    1.安装要用到的库 brew install lighttpd brew install nginx brew install Spawn-fcgi //----------------------- ...

  7. UC算法笔试题

    说实话,昨天UC的笔试题基本全是基础,但是太基础,直接导致很多都不能确定了.看来不管找工作还是找实习,一定要复习到位.好在我也一直是抱着打酱油的味道,实习与否不是特别在意,否则真心要鄙视死自己啦. 好 ...

  8. yum出现的“UnicodeDecodeError: 'ascii' codec”问题解决

    新装了CentOS 6.5系统,打算使用yum安装程序是出现了如下错误: Loading mirror speeds from cached hostfile Traceback (most rece ...

  9. Jquery中的ajax应用(第九章PPT)

    <%@ page language="java" import="java.util.*" pageEncoding="ISO-8859-1&q ...

  10. 对象数组的初始化:null reference

    今天写代码的时候,发现我写的对象数组,只声明,而没有初始化,所以记录一下这个问题:null reference. Animals [] an=new Animals[5];//这只是个对象类型数组的声 ...