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格式问题
我在网上找的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:"\@"
在导出的表格中显示为文本格式。
修改数字输出格式,直接输出的 <td style="mso-number-format:''\@'';">' || NVL(L_H.E_NUMBER, ' ') || ' 如果在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:"\@"的更多相关文章
- 【原创】.NET读写Excel工具Spire.Xls使用(3)单元格控制
本博客所有文章分类的总目录:http://www.cnblogs.com/asxinyu/p/4288836.html .NET读写Excel工具Spire.Xls使用文章 ...
- Excel 批量快速合并相同的单元格:数据透视表、宏代码、分类汇总
Excel 批量快速合并相同的单元格 在制作Excel表格的时候,为了使得自己制作的报表更加简洁明了,方便查阅,经常需要合并很多相同的单元格,如果有几千几万条记录需要合并的话,真的会让人发疯.怎样 ...
- C#操作Excel的技巧与方法 设置单元格等
C#操作Excel可以分为客户端和插件版本,区别就是是否需要Excel环境,功能实现一样 一.通用操作与处理(有点乱有时间再整理) 1:工程对excel类库的导入,如: c:\program file ...
- excel如何设置输入数字后单元格自动填充颜色
在使用excel的过程中,有时需要在输入数字时,突出显示这些单元格,突出显示可以用有填充颜色的单元格来表示.为了实现这样的效果,需要借助excel的条件格式. 工具/原料 电脑 Excel 2010 ...
- Excel VBA入门(八)单元格边框
本文基于以下文件 http://pan.baidu.com/s/1nvJtsu9 (部分)内容预览: 1. 边框样式 Sub cell_format() Dim sht As Worksheet Di ...
- excel把按行合并的单元格重新拆分
前言 今天帮朋友弄她excel表格的数据,发现excel表格合并之后,再拆分就不再同一行里面了,导致后面想要拆分回来非常头痛,如下图(下面的数据是模拟的): 可以看到第一例和其他例中间部分为合并的,此 ...
- Excel 2003 中如何用VBA 代码访问单元格里的值及操作单元格 - 唐诗宋词的专栏 - 博客频道 - CSDN.NET
在Excel 中编写VBA 代码,最常做的事可能就是操作表单中单元格里的数据. 我这里总结一下如何从VBA 代码中操作单元格的数据. 在VBA 代码中操作单元格需要用到Range 对象,Range 是 ...
- web利用table表格生成excel格式问题
当我们把web页面上的table导成excel形式时,有时候我们的数据需要以特定的格式呈现出来,这时候我们就需要给指定的单元格添加一些样式规格信息. 文本:vnd.ms-excel.numberfor ...
- EXCEL在改动某几个单元格时隐藏空列
概述 今天我哥来找我帮他搞下excel表格,本着程序猿对程序无所不能的精神,我爽快的答应了.结果查了半天才搞定.现在记录在此,供自己以后参考,相信对其他人也有用. PS:这几天正在弄博客,马上就要弄完 ...
随机推荐
- saturate_cast防越界函数
CV_IMAGE_ELEM(img2,uchar,i,j*3+c)=saturate_cast<uchar>(alpha*( CV_IMAGE_ELEM(img,uchar,i,j*3+c ...
- HDU 1106 排序(排序)
输入一行数字,如果我们把这行数字中的‘5’都看成空格,那么就得到一行用空格分割的若干非负整数(可能有些整数以‘0’开头,这些头部的‘0’应该被忽略掉,除非这个整数就是由若干个‘0’组成的,这时这个整数 ...
- luoguP1991无线通讯网
国防部计划用无线网络连接若干个边防哨所.2种不同的通讯技术用来搭建无线网络.每个边防哨所都要配置无线电收发器:有一些哨所还可以配备卫星电话任意两个配置了一条卫星电话线路的哨所(两边均有卫星电话)均可以 ...
- Python3 字典(map)
ayout: post title: Python3 字典(map) author: "luowentaoaa" catalog: true tags: mathjax: true ...
- Java中String对象的创建
字符串对象是一种特殊的对象.String类是一个不可变的类..也就说,String对象一旦创建就不允许修改 String类有一个对应的String池,也就是 String pool.每一个内容相同的字 ...
- 【kd-tree】bzoj3290 Theresa与数据结构
离线所有操作,对所有可能存在的点建立kd-tree,add相当于权值+1,cancel相当于权值-1. 修改操作要记录kd-tree上每个点的fa,从底向上地进行修改. 优化:若一个矩形框的sumv= ...
- python基础之二
1. 数据类型 1.1 数字 数字的作用:与数字相关,例如:手机号.QQ号.身份证号等,用数字表示 数字分为:整数(int).浮点数(float).复数(了解) 例子: age = 10 print( ...
- XAMPP 下apache部署网站,多个虚拟机(空间)配置
1.首先修改C盘WINDOWS/system32/drivers/etc目录下的 hosts 文件,用记事本打开,加入: 127.0.0.1 www.a.com 127.0.0.1 www.b.com ...
- Android Studio 下载地址 & SDK 更新教程
Android Studio 下载地址: http://www.android-studio.org/ SDK 更新教程: http://www.androiddevtools.cn/ SDK 推荐使 ...
- canvas的一些问题记录
canvas当被设置width时,原来绘制的内容,将会清空.