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. AtCoder - 2705 Yes or No

    Problem Statement You are participating in a quiz with N+M questions and Yes/No answers. It's known ...

  2. [xsy2164]theory

    又积累了一个网络流模型:最大权闭合子图,相关证明去看论文,感觉自己不是很懂证明,但现在还是先把建模记下来再说吧 枚举一个点,硬点它一定要被选中,那么以它为根,如果选了$x$就必须要选$fa_x$,这就 ...

  3. 【动态规划】Gym - 100507G - The Debut Album

    一般思路的dp是用f(i,j,0)表示前i位最后有j个1的方案数,用f(i,j,1)表示前j位最后有j个2的方案数,j都是大于等于1的,然后比较容易转移. 但这题卡内存,就只能用f(i,j)表示前i位 ...

  4. 【博弈论】bzoj2463 [中山市选2009]谁能赢呢?

    ∵都是最优操作 ∴n*n=偶数时Bob赢,否则Alice赢 n*n的奇偶性等价于n的奇偶性. #include<cstdio> using namespace std; int n; in ...

  5. [POI2010]Frog

    题目大意: 一个数轴上有n个点,现在你要在这些点上跳. 每次跳的时候你只能跳到离这个点第k近的点上,而且要连续跳m次. 问从每一个点出发,最后分别会在哪一个点结束. 思路: 首先可以维护一个大小为k+ ...

  6. [读书笔记]iOS 7 UI设计 对比度

    好久没写随笔了,最近在读<iOS 7 byTutorials>,很不错,推荐给大家. 每一个好的程序员也都是一个设计师,不懂设计的程序员不是好的CTO.哈哈,开个小玩笑. iOS 7设计的 ...

  7. 关于数字、数据处理的几个PHP函数汇总

    1. / 得到的结果是浮点数 2. % 求余数 3.ceil():得到大于当前数字的整数 $num=3.4; $num=ceil($num); echo $num;   的到的结果是4 $num=3. ...

  8. chrome 技巧 记录一些以前不太熟悉的

    chrome已经不知道用了多少年了,但是还是有些技巧不熟悉,记录下有用的和自己不熟悉的 如何查看dom的绑定事件(查看jquery的绑定事件) 新版本的network的类型选项哪去了? 在Source ...

  9. SpringBoot定时任务(Spring Schedule )实现方法

    FastDateFormat fdf = FastDateFormat.getInstance("yyyy-MM-dd HH:mm:ss"); fdf.format(new Dat ...

  10. Scut游戏服务器免费开源框架--快速开发(3)

    Scut快速开发(3) 1     开发环境 Scut Lib版本:5.2.3.2 需要安装的软件 a)        IIS和消息队列(MSMQ) b)        数据库,Sql2005以上版本 ...