HTML save data to CSV or excel
/*********************************************************************************
* HTML save data to CSV or excel
* 说明：
* 将网页内容保存到csv文件或者execl中。
*
* 2017-10-28 深圳 南山平山村 曾剑锋
********************************************************************************/ 一、参考文档：
. store data from a form using just HTML
https://stackoverflow.com/questions/14360769/store-data-from-a-form-using-just-html
. Write to CSV file locally with HTML5
https://stackoverflow.com/questions/27013963/write-to-csv-file-locally-with-html5
. Web导出excel的几种方法
http://taote.iteye.com/blog/842496
. JS直接导出excel 兼容ie、chrome、firefox
http://blog.csdn.net/sinat_15114467/article/details/51098522
. How do I export html table data as .csv file?
https://stackoverflow.com/questions/7161113/how-do-i-export-html-table-data-as-csv-file 二、原理：
data协议方式：对于支持data协议的浏览器，可以将html或是csv先用js base64处理，然后前缀data:application/vnd.ms-excel;base64,，即可使浏览器将其中的数据当做excel来处理，浏览器将提示下载或打开excel文件,可惜的是ie不支持。extjs的官网有一个grid的plugin，实现导出xhtml格式的伪excel文件，就是这么做的。 三、Example
<!DOCTYPE html>
<html>
<head>
<!-- <script src="jquery-3.2.1.min.js"></script> -->
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js"></script>
<script type="text/javascript">
function exportTableToCSV($table, filename) {
var $rows = $table.find('tr:has(td),tr:has(th)'), // Temporary delimiter characters unlikely to be typed by keyboard
// This is to avoid accidentally splitting the actual contents
tmpColDelim = String.fromCharCode(), // vertical tab character
tmpRowDelim = String.fromCharCode(), // null character // actual delimiter characters for CSV format
colDelim = '","',
rowDelim = '"\r\n"', // Grab text from table into CSV formatted string
csv = '"' + $rows.map(function (i, row) {
var $row = $(row), $cols = $row.find('td,th'); return $cols.map(function (j, col) {
var $col = $(col), text = $col.text(); return text.replace(/"/g, '""'); // escape double quotes }).get().join(tmpColDelim); }).get().join(tmpRowDelim)
.split(tmpRowDelim).join(rowDelim)
.split(tmpColDelim).join(colDelim) + '"', // Data URI
csvData = 'data:application/csv;charset=utf-8,' + encodeURIComponent(csv); console.log(csv); if (window.navigator.msSaveBlob) { // IE 10+
//alert('IE' + csv);
window.navigator.msSaveOrOpenBlob(new Blob([csv], {type: "text/plain;charset=utf-8;"}), "csvname.csv")
}
else {
$(this).attr({ 'download': filename, 'href': csvData, 'target': '_blank' });
}
} $(function() {
// This must be a hyperlink
$("#xx").on('click', function (event) { // exportTableToCSV.apply(this, [$('#projectSpreadsheet'), 'export.csv']);
exportTableToCSV.apply(this, [$('#QMSTable'), 'export.csv']); // IF CSV, don't do event.preventDefault() or return false
// We actually need this to be a typical hyperlink
});
}); function fillHidTable(){
var htqf; //-- hidden field
var rf; //-- retrieved field
for ( var i = ; i < ; i++ ) {
rf = "htqf"+i;
document.getElementById(rf).innerHTML = document.getElementById("Q"+i+"CALC").value;
}
tableToExcel('hidTable', 'Analysis Results');
} 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> <title>HTML Form Data to Excel</title> <style type="text/css" media="screen">
.divCenMid{font-family:Arial,sans-serif;font-size:14pt;font-style:normal;font-weight:;text-align:center;vertical-align:middle;margin:;}
.allbdrCenMid{border:.75pt solid windowtext;color:#;font-family:Arial,sans-serif;font-size:10pt;font-style:normal;font-weight:;text-align:center;vertical-align:middle;margin:;}
.allbdrCenTop{border:.75pt solid windowtext;color:#;font-family:Arial,sans-serif;font-size:10pt;font-style:normal;font-weight:;text-align:center;vertical-align:top;margin:;}
.allbdrLtMid{border:.75pt solid windowtext;color:#;font-family:Arial,sans-serif;font-size:10pt;font-style:normal;font-weight:;text-align:left;vertical-align:middle;margin:;}
.allbdrLtTop{border:.75pt solid windowtext;color:#;font-family:Arial,sans-serif;font-size:10pt;font-style:normal;font-weight:;text-align:left;vertical-align:top;margin:;} </style> </head> <body> <table width= "565px" cellspacing="" cellpadding="" style="border-spacing:0;" id="QMSTable">
<col width="25px"/>
<col width="120px"/>
<col width="360px"/>
<col width="60px"/>
<tr>
<td class="divCenMid" colspan = ""> QMS Assessment</td>
</tr>
<tr>
<td class="allbdrCenMid"> No</td>
<td class="allbdrCenMid"> Criteria</td>
<td class="allbdrLtMid"> Question</td>
<td class="allbdrCenMid"> Score</td>
</tr>
<tr>
<td class="allbdrCenTop"> Q1</td>
<td class="allbdrLtTop"> Quality Unit Independency</td>
<td class="allbdrLtTop"> Do you have the Quality Unit?</td>
<td class="allbdrCenMid">
<input id="Q1CALC" type="text" value="" class="nobdrCenMid" style="overflow:hidden; width:93% " name="Q1CALC"/>
</td>
</tr>
<tr>
<td class="allbdrCenTop"> Q2</td>
<td class="allbdrLtTop"> Apply PICS GMP</td>
<td class="allbdrLtTop"> Which GMP regulation do you use?</td>
<td class="allbdrCenMid">
<input id="Q2CALC" type="text" value="" class="nobdrCenMid" style="overflow:hidden; width:93% " name="Q2CALC"/>
</td>
</tr>
<tr>
<td class="allbdrCenTop"> Q3</td>
<td class="allbdrLtTop"> Deviation or Non-conformance</td>
<td class="allbdrLtTop"> Do you have a deviation or non-conformance procedure?</td>
<td class="allbdrCenMid">
<input id="Q3CALC" type="text" value="" class="nobdrCenMid" style="overflow:hidden; width:93% " name="Q3CALC"/>
</td>
</tr>
<tr>
<td class="allbdrCenTop"> Q4</td>
<td class="allbdrLtTop"> Complaint</td>
<td class="allbdrLtTop"> Do you have a customer complaint procedure?</td>
<td class="allbdrCenMid">
<input id="Q4CALC" type="text" value="" class="nobdrCenMid" style="overflow:hidden; width:93% " name="Q4CALC"/>
</td>
</tr>
</table> <div id="hidTable" style="display: none">
<table id="testTable">
<caption>Supplier Risk Analysis</caption>
<colgroup></colgroup>
<colgroup></colgroup>
<colgroup></colgroup>
<thead>
<tr>
<th>No.</th>
<th>Question</th>
<th>Score</th>
</tr>
</thead>
<tbody>
<tr>
<td>Q1</td>
<td>Do you have the Quality Unit?</td>
<td id="htqf1">-</td>
</tr>
<tr>
<td>Q2</td>
<td>Apply PICS GMP?</td>
<td id="htqf2">-</td>
</tr>
<tr>
<td>Q3</td>
<td>Do you have a deviation or non-conformance procedure?</td>
<td id="htqf3">-</td>
</tr>
<tr>
<td>Q4</td>
<td>Do you have a customer complaint procedure?</td>
<td id="htqf4">-</td>
</tr>
</tbody>
</table>
</div>
<input type="button" onclick="fillHidTable()" value="Export Data to Excel"> <br />
<br />
<div>
<a href="#" id="xx" style="text-decoration:none;color:#000;background-color:#ddd;border:1px solid #ccc;padding:8px;">Export Table data into Excel</a>
</div>
</body>
</html>
HTML save data to CSV or excel的更多相关文章
- 15、解决14中csv用excel打开乱码的问题 open('zhihu.csv','w',newline='',encoding='utf-8-sig')
解决14中csv用excel打开乱码的问题 ,其实就是在写csv的时候把 utf-8 改成 utf-8-sig open('zhihu.csv','w',newline='',encoding='ut ...
- Python json数据写入csv json excel文件
一.写入 写入csv和json, 可以使用csv这个包写, 我这里没有使用, 并且把写csv和json的写到一起了 具体的代码就不解释了 def write_file(file_name, items ...
- php使用ajax导出CSV或者EXCEl(thinkphp)方法
首先我强烈推荐看到这篇文章的你将导出文件设置为csv格式的文件 实际测试导出csv文件的速度是excel文件的10几倍左右 首先我先介绍csv文件的导出的方法: 如果你单纯是在数据导出界面上通过用户点 ...
- 利用php CI force_download($filename, $data) 下载.csv 文件解决文件名乱码，文件内容乱码
利用php CI force_download($filename, $data) 下载.csv 文件解决文件名乱码,文件内容乱码 2014-07-31 12:53 1047人阅读 评论(0) 收藏 ...
- csv,txt,excel文件之间的转换,perl脚本
最近接触一些需要csv,txt,excel文件之间的转换,根据一些网上搜索加上自己的改动,实现自己想要的结果为主要目的,代码的出处已经找不到了,还请见谅,以下主要是针对csv&excel 和t ...
- Unity 读取CSV与Excel
前几天看到我们在游戏中需要动态加载某些角色的游戏策划值,关于这个问题怎么解决呢?其实办法很多种,归根到底,就是数据的读取.我们可以想到的存储数据的载体有很多.例如:txt,xml,csv,excel. ...
- 14、使用csv和excel存储豆瓣top250电影信息
记得我们第三关的时候爬取了豆瓣TOP250的电影名/评分/推荐语/链接,现在呢,我们要把它们存储下来,记得用今天课上学的csv和excel,分别存储下来哦- URL htt ...
- C# 读取CSV和EXCEL文件示例
我们习惯了直接连到数据库上面读取数据表的数据内容: 如果有一天我们需要读取CSV,EXCEL文件的内容的时候,可不可以也像读数据表的方式一样呢?当然可以,使用OleDB ADO.NET是很简单的事情 ...
- csv和excel互转
Python csv转换为excel学习笔记: openpyxl模块需要安装pip install openpyxl import openpyxl import csv '''读取csv文件写入ex ...
随机推荐
- HDU5086:Revenge of Segment Tree(规律题）
http://acm.hdu.edu.cn/showproblem.php?pid=5086 #include <iostream> #include <stdio.h> #i ...
- ZOJ2588：Burning Bridges（无向连通图求割边）
题目:http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemId=1588 吐下槽,不得不说ZOJ好坑,模版题做了一个多小时. 题意:* ...
- 认识与设计Serverless（二）
一.设计Serverless的功能模块 第一节讲了Serverless一些概念与特性,废话居多,概念的东西了解过后要有设计与构思,才能学到精髓,一个Serverless平台的形成,涉及到很多模块的架构 ...
- java基础知识 构造方法
在java里面,构造方法也就是构造函数 构造函数=构造方法;构造方法是一种特殊的方法,具有以下特点.(1)构造方法的方法名必须与类名相同.(2)构造方法没有返回类型,也不能定义为void,在方法名前面 ...
- log parser分析windows日志
首先将windows安全日志导出,步骤如下: 运行eventvwr.msc命令,打开windows日志,如下图,将所有事件另存为: 保存完之后是一个.evtx格式的文件,将使用log parser分析 ...
- 2018-2019-1 20189215 《Linux内核原理与分析》第四周作业
<庖丁解牛>第三章书本知识总结 计算机的三大法宝 存储程序计算机 函数调用堆栈 中断 操作系统的两把宝剑 中断上下文的切换--保存现场和恢复现场 进程上下文的切换 Linux内核源码的目录 ...
- Anchor、Dock
转:http://blog.sina.com.cn/s/blog_7f7cd96601013trt.html 在设计可供用户调整大小的窗体时,如何实现该窗体上的控件也应能正确地随窗体的改变而自动调整大 ...
- SpringBoot基础的使用
springboot的基础使用 和 内部原理 高级使用整合 进行web开发 springboot 看下spring的所有项目:https://spring.io/projects 等等 就不一一介绍了 ...
- 【转载】解决telnet无法连接 Connection refused
原文:解决telnet无法连接 Connection refused telnet协议是TCP/IP协议族中的一员,是Internet远程登陆服务的标准协议和主要方式.它为用户提供了在本地计算机上完成 ...
- HDU 3605 Escape（状态压缩+最大流）
http://acm.hdu.edu.cn/showproblem.php?pid=3605 题意: 有n个人和m个星球,每个人可以去某些星球和不可以去某些星球,并且每个星球有最大居住人数,判断是否所 ...