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的记录贴记录的内容是指令的试用
前言:操作系统是WIn7 64位旗舰版 ,Mysql的版本是mysql-5.7.10-winx64 是社区版就是所谓的最后的免费版本. 下载后解压然后配置my.ini文件. ××××××× ...
docker——Etcd高可用键值对数据库
一.简介 Etcd按照官方介绍: Etcd is a distributed, consistent key-value store for shared configuration and serv ...
JDBC NOTE
JDBC 基本流程: 1. 加载驱动 a. SQLSERVER:Class.forName("com.microsoft.sqlserver.jdbc.SQLServerDriver&quo ...
如何使用iClap创建普通批注
iClap是一款以产品管理为基础的企业协同办公软件,其中智能批注为其产品管理的核心工具,我们可以以图片,文字和视频的形式创建批注.本文为大家介绍的是如何在iClap上创建普通批注(图片,文字形式). ...
poj2954 Triangle
地址:http://poj.org/problem?id=2954 题目: Triangle Time Limit: 1000MS Memory Limit: 65536K Total Submi ...
Python Missing parentheses in call to 'print'
原来是因为Python2.X和Python3.X不兼容. 我安装的是Python3.X,但是我试图运行的却是Python2.X 的代码. 所以上面的语法在python3中是错误的.在python3中, ...
【运维技术】shell脚本实现线程挂掉，自动重启功能
由于分布式系统的流行,服务器上面部署的项目都是多实例的.而我又希望有一个功能,当服务器出现异常情况能够自动重启实例. 所以我想到了使用shell脚本监控实例进程id,如果不存在的话,就重启对应的实例. ...
sql注入分析
输入 1:sql为:select * from users where id = 1; 输入'测试:回显:You have an error in your SQL syntax; check the ...
BZOJ 1853: [Scoi2010]幸运数字（容斥原理）
http://www.lydsy.com/JudgeOnline/problem.php?id=1853 题意: 在中国,很多人都把6和8视为是幸运数字!lxhgww也这样认为,于是他定义自己的“幸运 ...
python 获取二维数组所有元素
import itertools original_list = [[,,],[,,], [], [,,]] new_merged_list = list(itertools.chain(*origi ...

HTML save data to CSV or excel

HTML save data to CSV or excel的更多相关文章

随机推荐

热门专题