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 ...
随机推荐
- mysql数据库访问权限限制设置
---只能本地访问,设置随意访问 update user set host='%' where host='localhost': flush privileges; ---随意访问,设置只能本地访问 ...
- R语言基本语法
R语言基本语法 基本数据类型 数据类型 向量 vector 矩阵 matrix 数组 array 数据框 data frame 因子 factor 列表 list 向量 单个数值(标量)没有单独的数据 ...
- Python实现支付宝在线支付
windows系统安装Python虚拟环境 首先保证你的系统已经安装好了Python 安装virtualenv C:\WINDOWS\system32>pip3 install virtuale ...
- Action<>和Func<> 区别
其实他们两个都是委托[代理]的简写形式. 一.[action<>]指定那些只有输入参数,没有返回值的委托 Delegate的代码: public delegate void myDeleg ...
- Android ActionBar自定义
关于自定义的ActionBar的实现过程,这里做下笔记以供之后查看. 1.默认状态 使用Android Studio新建一个名为“ActionBar”的应用,默认actionbar如图(1)所示. 图 ...
- 【转载】package-info
本文是转载,原文地址:http://strong-life-126-com.iteye.com/blog/806246 package-info.java对于经常使用外部包的程序员来说应该是熟悉陌生人 ...
- Python3：pyecharts数据可视化插件
Python3:pyecharts数据可视化插件 一.简介 pyecharts 是一个用于生成 Echarts 图表的类库. Echarts 是百度开源的一个数据可视化 JS 库.主要用于数据可视化. ...
- 【spring-boot】 springboot整合quartz实现定时任务
在做项目时有时候会有定时器任务的功能,比如某某时间应该做什么,多少秒应该怎么样之类的. spring支持多种定时任务的实现.我们来介绍下使用spring的定时器和使用quartz定时器 1.我们使用s ...
- webpack执行中出现 ERROR in Path must be a string. Received undefined
执行webpack时出现错误信息 ERROR in Path must be a string. Received undefined 原因在于我的node.js版本太高了,目前node版本为6.10 ...
- 使用IDEA创建基于Gradle构建的JavaWeb项目
环境配置 jdk: 1.8 Gradle: 4.4.1 Tomcat: 9.0.0 One Step! 创建项目,初始化项目结构. 打开我们的IDEA,进入创建项目的界面,勾选Java,Web两个选项 ...