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:"\@"

时间:2022-10-04 22:30:14

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里的展现出的内容,如需增加表头等内容需要在页面获取的字符串中拼接表头的相关字符串,详细介绍如下:

  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:"\@"

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

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

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

  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:"\@"

问题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页面中有个别不想被打印出来的,只需要将这个元素隐藏起来即可,但有些按钮、复选框向下图这样,即使隐藏也还会显示:

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:"\@"

打印出来是酱紫:

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:"\@"

  办法就是将复选框等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. 【原创】&period;NET读写Excel工具Spire&period;Xls使用&lpar;3&rpar;单元格控制

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

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

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

  3. C&num;操作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&period;NET

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

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

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

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

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

随机推荐

  1. News新闻发布系统

            News新闻发布系统分页的实现 1.首先我们要在NewsDAO中创建一个方法,返回List<NewsEntity>集合,其中pageIndex表示当前页,pageSize表 ...

  2. WRONGTYPE Operation against a key holding the wrong kind of value

    今天改动代码,一运行就跑错了,错误原因: 因为redis中已经存在了相同的key, 而且key对应的值类型并不是Set,而是SortSet(改动前):再调用smembers时,抛出此错误. 解决方法: ...

  3. 简单的powershell 批量生成身份证复印件

    用Powshell 脚本批量完成,代码比较简单,出生日期,图片我都没有改,图片用于测试,附件. cls; $path = Split-Path -Parent $MyInvocation.MyComm ...

  4. easy-ui datagrid

    Easy-ui引用    <link href="css/EasyUI/themes/icon.css" rel="stylesheet" type=&q ...

  5. 防范DDOS攻击脚本

    防范DDOS攻击脚本 #防止SYN攻击 轻量级预防 iptables -N syn-flood iptables -A INPUT -p tcp --syn -j syn-flood iptables ...

  6. Oracle数据库按属性成绩查询

    create or replace function bb return nvarchar2as-----------自定义游标类型type class_student is record( snam ...

  7. css布局--水平居中

    一.水平居中 1. 使用text-align和display:inline-block实现水平居中 html <div class="parent"> <div ...

  8. 获取当前最顶层的VC

    #pragma mark -  获取当前最顶层的ViewController - (UIViewController*)topVC:(UIViewController*)VC { if([VC isK ...

  9. C&num; Timer 的区别

    首先,我们看一下 3种Timer 1.System.Threading.Timer 2.System.Timers.Timer 3.System.Windows.Forms.Timer 主要区别,其实 ...

  10. MySql安装与使用(linux)

    安装 MySQL 注意:此处安装是yum安装为例: MySQL安装 #yum install mysql-server 完后显示如下: MySQL初始化 #service mysqld start 查 ...