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 ...
随机推荐
- HDU：Gauss Fibonacci（矩阵快速幂+二分）
http://acm.hdu.edu.cn/showproblem.php?pid=1588 Problem Description Without expecting, Angel replied ...
- Smarty小结提纲
Smarty:模板技术 实现功能:前后分离. 原理:主要通过Smarty核心类实现,调用display方法,将模板文件读取,用正则进行替换,替换完保存到临时文件,将临时文件加载到当前页面. 配置文件( ...
- Java基础教程：IO流与文件基础
Java:IO流与文件基础 说明: 本章内容将会持续更新,大家可以关注一下并给我提供建议,谢谢啦. 走进流 什么是流 流:从源到目的地的字节的有序序列. 在Java中,可以从其中读取一个字节序列的对象 ...
- 【转载】package-info
本文是转载,原文地址:http://strong-life-126-com.iteye.com/blog/806246 package-info.java对于经常使用外部包的程序员来说应该是熟悉陌生人 ...
- 20155201 实验三《Java面向对象程序设计》实验报告
20155201 实验三<Java面向对象程序设计>实验报告 一.实验内容 XP基础 XP核心实践 相关工具 二.实验要求 1.没有Linux基础的同学建议先学习<Linux基础入门 ...
- 关于《Java读书笔记》第六章课后习题选择题总结与疑问
课后习题 选择题 3 题 代码: class Some{ String ToString(){ return "Some instance"; } } public class M ...
- 解决use -D_SCL_SECURE_NO_WARNINGS的问题
加入预处理器(项目属性----C/C++----预处理----预处理器定义): _SCL_SECURE_NO_WARNINGS
- 【Rest】在Dubbo中开发REST风格的远程调用（RESTful Remoting）
目录 概述 REST的优点 应用场景 快速入门 标准Java REST API:JAX-RS简介 REST服务提供端详解 HTTP POST/GET的实现 Annotation放在接口类还是实现类 J ...
- POJ 3259 Wormholes（Bellman-Ford）
http://poj.org/problem?id=3259 题意:有一些普通的洞和虫洞,每个洞都有经过的时间,虫洞的时间是负的,也就是时光倒流,问是否能回到出发时的时间. 思路: 贝尔曼-福特算法判 ...
- vim 安装molokai主题
在.vim文件夹下创建文件夹colors 进入 https://github.com/tomasr/molokai 下载molokai.vim 将其放入colors文件夹下 进入.vimrc中 添加 ...