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-06-02 15:01:41

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设置它的样式：

问题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格式问题

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

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

相关文章