在Javascript或Jquery中导出html表格和格式化的CSS到Excel或PDF文件
Exporting html table with formatted CSS into an Excel or PDF file in Javascript or Jquery
我尝试了几种方法Datatable方法与一个按钮点击和这个Javascript:
<script type="text/javascript">
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))
}
})()
</script>
使用此按钮:
<input type="button" onclick="tableToExcel('myTable', 'W3C Example Table')" value="Export to Excel">
是否可以保存格式化的CSS表?我只在tr处格式化了表格,例如像这样:
<tr class="wassat">
<td><a>280 Zzzap</a></td>
<td><a>Bally Astrocade</a></td>
<td><a>arc 4/10</a></td>
<td><a>badan</a></td>
<td><a>3/5</a></td>
<td><a>Rc</a></td>
<td><a>Arc</a></td>
<td><a>1978</a></td>
<td><a>Didam</a></td>
<td><a></a></td>
</tr>
CSS代码是这样的
tr.wassat { background-color:#DF7401; }
我希望这不是一个重复的帖子,在搜索中找不到它。
TRY THIS:
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 }
var blob = new Blob([format(template, ctx)]);
var blobURL = window.URL.createObjectURL(blob);
if (ifIE()) {
csvData = table.innerHTML;
if (window.navigator.msSaveBlob) {
var blob = new Blob([format(template, ctx)], {
type: "text/html"
});
navigator.msSaveBlob(blob, '' + name + '.xls');
}
}
else
window.location.href = uri + base64(format(template, ctx))
}
})()
function ifIE() {
var isIE11 = navigator.userAgent.indexOf(".NET CLR") > -1;
var isIE11orLess = isIE11 || navigator.appVersion.indexOf("MSIE") != -1;
return isIE11orLess;
}
相关文章:
- CSS-如何定位内容数据标题
- jQuery中是否内置了任何字符串格式化函数
- 窗口大小html css
- 如果文本字段为空,则使用JavaScript应用CSS样式
- 动画.CSS重播
- 有没有一种方法可以防止img get请求使用css或js发生
- CSS表格:从列平移到整个表格宽度
- 使用NG Repeat angularJS格式化CSS图像
- CSS 没有格式化 ActionLinks
- 由 JavaScript 创建的元素未被 CSS 文件格式化
- Js 倒数计时器 css 格式化/自定义
- 使用 css 格式化表单
- 使用javascript jquery或css格式化字符串日期
- 有没有什么技巧可以在格式化/缩小的CSS、JS代码之间自动往返
- 可以't获取要使用css格式化的jsp日期值
- 在css表单上用数组格式化段落
- 在CSS弹出框中格式化文本的问题
- 注入的li项不使用CSS样式格式化
- 如何给选项下载页面作为一个完整的HTML文件(使用JS/CSS重新格式化和样式后)
- 在Javascript或Jquery中导出html表格和格式化的CSS到Excel或PDF文件