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:这几天正在弄博客,马上就要弄完 ...
随机推荐
- cogs 服务点设置
3. 服务点设置 ☆ 输入文件:djsa.in 输出文件:djsa.out 简单对比时间限制:1 s 内存限制:128 MB 问题描述为了进一步普及九年义务教育,政府要在某乡镇建立一所 ...
- 【找规律】URAL - 2065 - Different Sums
就让0出现得尽可能多嘛……大概感受一下就是这样…… 0 0 ... 0 0 0 0 4 -4 3 -3 2 -2 1 -1 #include<cstdio> using namespace ...
- NOIP模拟赛[补档]
图论: 差分约束, 2 SAT 数据结构 字符串 数学: FFT / NTT / 线代 DP 计算几何 暴力 线性基 CF 724G 计划: D1 T1: 斜率优化DP D1 T2: 差分约束 D1 ...
- pythonGUI编程用Canvas模拟画板
代码如下: from tkinter import * import webbrowser root = Tk() w = Canvas(root,width=400,height=200) w.pa ...
- JS删除数组中某一项或几项的方法汇总
1.JS中的splice方法 splice(index, len, [item]) //注意:该方法会改变原始数组. splice有3个参数,它也可以用来替换/删除/添加数组内某一个或者几个值. ...
- Jmeter调用Webapi介绍
一.介绍 JMeter主要用于压力测试,使用Java编写,由Apache基金会管理 官方网站:http://jmeter.apache.org/index.html 下载地址: ...
- WebService authentication
http://blog.csdn.net/largestone_187/article/details/5734632 通过SoapHeader对用户口令进行验证,只有授权的用户才可以使用接口.确保了 ...
- ActiveX控件在项目中的应用
- Discuz! 6.x/7.x 版本 前台任意代码执行漏洞
一.漏洞原理: 由于php5.3.x版本里php.ini的设置里request_order默认值为GP,导致Discuz! 6.x/7.x 全局变量防御绕过漏洞. include/global.fun ...
- pymongo增删查改以及条件查询
---恢复内容开始--- 下载Pymongo pip install pymongo pip install pymongo==x.x.x指定下载版本 连接数据库 from pymongo impor ...