/*********************************************************************************

 *                     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的更多相关文章

  1. 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 ...

  2. Python json数据写入csv json excel文件

    一.写入 写入csv和json, 可以使用csv这个包写, 我这里没有使用, 并且把写csv和json的写到一起了 具体的代码就不解释了 def write_file(file_name, items ...

  3. php使用ajax导出CSV或者EXCEl(thinkphp)方法

    首先我强烈推荐看到这篇文章的你将导出文件设置为csv格式的文件 实际测试导出csv文件的速度是excel文件的10几倍左右 首先我先介绍csv文件的导出的方法: 如果你单纯是在数据导出界面上通过用户点 ...

  4. 利用php CI force_download($filename, $data) 下载.csv 文件解决文件名乱码，文件内容乱码

    利用php CI force_download($filename, $data) 下载.csv 文件解决文件名乱码,文件内容乱码 2014-07-31 12:53 1047人阅读 评论(0) 收藏  ...

  5. csv,txt,excel文件之间的转换,perl脚本

    最近接触一些需要csv,txt,excel文件之间的转换,根据一些网上搜索加上自己的改动,实现自己想要的结果为主要目的,代码的出处已经找不到了,还请见谅,以下主要是针对csv&excel 和t ...

  6. Unity 读取CSV与Excel

    前几天看到我们在游戏中需要动态加载某些角色的游戏策划值,关于这个问题怎么解决呢?其实办法很多种,归根到底,就是数据的读取.我们可以想到的存储数据的载体有很多.例如:txt,xml,csv,excel. ...

  7. 14、使用csv和excel存储豆瓣top250电影信息

        记得我们第三关的时候爬取了豆瓣TOP250的电影名/评分/推荐语/链接,现在呢,我们要把它们存储下来,记得用今天课上学的csv和excel,分别存储下来哦-       URL     htt ...

  8. C# 读取CSV和EXCEL文件示例

    我们习惯了直接连到数据库上面读取数据表的数据内容: 如果有一天我们需要读取CSV,EXCEL文件的内容的时候,可不可以也像读数据表的方式一样呢?当然可以,使用OleDB ADO.NET是很简单的事情 ...

  9. csv和excel互转

    Python csv转换为excel学习笔记: openpyxl模块需要安装pip install openpyxl import openpyxl import csv '''读取csv文件写入ex ...

随机推荐

  1. POJ3352Road Construction(构造双连通图)sdut2506完美网络

    构造双连通图:一个有桥的连通图,如何把它通过加边变成边双连通图? 一个有桥的连通图,如何把它通过加边变成边双连通图?方法为首先求出所有的桥,然后删除这些桥边,剩下的每个连通块都是一个双连通子图.把每个 ...

  2. linux下高并发网络应用注意事项

    本文转自:http://www.blogjava.net/bacoo/archive/2012/06/11/380500.html linux下高并发网络应用注意事项 vi /etc/sysctl.c ...

  3. 用通俗的语言解释restful

    实现了REST规范的Web API就叫RESTful API. 简单来说:就是用url定位资源,用http描述来操作资源. web是什么:分布式信息系统为超文本文件和其他对象(资源)提供访问入口. 资 ...

  4. hbase优缺点

    Hbase的优缺点 1 列的可以动态增加,并且列为空就不存储数据,节省存储空间. 2 Hbase自动切分数据,使得数据存储自动具有水平scalability. 3 Hbase可以提供高并发读写操作的支 ...

  5. 来自MSDN的RibbonGadgets练习

    来自MSDN的RibbonGadgets练习 RibbonGadgets是少见的来自官方的资源. 如果选择Menu Items = 集合,则会有向下的小箭头,同时会出现下来菜单. 这个都关系叫做gal ...

  6. Redis之hash数据结构实现

    参考 https://www.cnblogs.com/ourroad/p/4891648.html https://blog.csdn.net/hjkl950217/article/details/7 ...

  7. haskell简明入门(一)

    本文的主要内容参考自<Haskell趣学指南> 1. What is Haskell?     以下内容引用自Haskell官网: Haskell是一个先进的,纯粹的函数式编程语言.一个典 ...

  8. Codeforces Round #320 (Div. 2) [Bayan Thanks-Round] E. Weakness and Poorness 三分

    E. Weakness and Poorness time limit per test 2 seconds memory limit per test 256 megabytes input sta ...

  9. pairs 和 ipairs区别

    local tab= { [] = "a", [] = "b", [] = "c" } for i,v in pairs(tab) do - ...

  10. GetLastError()数字_转换为_文字

    1.具体参数 可参看 http://blog.csdn.net/hongweigg/article/details/6821536 或 其它文章 或 MSDN 2.VC6 测试代码: #include ...