HTML save data to CSV or excel

2021-05-16 10:29

阅读：586

标签：ati type excel window family art 实现 using cci

/*********************************************************************************
 *                     HTML save data to CSV or excel
 * 说明：
 *     将网页内容保存到csv文件或者execl中。
 *
 *                                              2017-10-28 深圳 南山平山村 曾剑锋
 ********************************************************************************/

一、参考文档：
    1. store data from a form using just HTML
        https://stackoverflow.com/questions/14360769/store-data-from-a-form-using-just-html
    2. Write to CSV file locally with HTML5
        https://stackoverflow.com/questions/27013963/write-to-csv-file-locally-with-html5
    3. Web导出excel的几种方法
        http://taote.iteye.com/blog/842496
    4. JS直接导出excel 兼容ie、chrome、firefox
        http://blog.csdn.net/sinat_15114467/article/details/51098522
    5. 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

‘ , 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)) } })()

HTML Form Data to Excel "565px" cellspacing="0" cellpadding="0" style="border-spacing:0;" id="QMSTable"> "25px"/> "120px"/> "360px"/> "60px"/>

class="divCenMid" colspan = "4"> QMS Assessment
class="allbdrCenMid"> No	class="allbdrCenMid"> Criteria	class="allbdrLtMid"> Question	class="allbdrCenMid"> Score
class="allbdrCenTop"> Q1	class="allbdrLtTop"> Quality Unit Independency	class="allbdrLtTop"> Do you have the Quality Unit?	class="allbdrCenMid"> "Q1CALC" type="text" value="" class="nobdrCenMid" style="overflow:hidden; width:93% " name="Q1CALC"/>
class="allbdrCenTop"> Q2	class="allbdrLtTop"> Apply PICS GMP	class="allbdrLtTop"> Which GMP regulation do you use?	class="allbdrCenMid"> "Q2CALC" type="text" value="" class="nobdrCenMid" style="overflow:hidden; width:93% " name="Q2CALC"/>
class="allbdrCenTop"> Q3	class="allbdrLtTop"> Deviation or Non-conformance	class="allbdrLtTop"> Do you have a deviation or non-conformance procedure?	class="allbdrCenMid"> "Q3CALC" type="text" value="" class="nobdrCenMid" style="overflow:hidden; width:93% " name="Q3CALC"/>
class="allbdrCenTop"> Q4	class="allbdrLtTop"> Complaint	class="allbdrLtTop"> Do you have a customer complaint procedure?	class="allbdrCenMid"> "Q4CALC" type="text" value="" class="nobdrCenMid" style="overflow:hidden; width:93% " name="Q4CALC"/>

"hidTable" style="display: none"> "testTable">

Supplier Risk Analysis
No.	Question	Score
Q1	Do you have the Quality Unit?	"htqf1">-
Q2	Apply PICS GMP?	"htqf2">-
Q3	Do you have a deviation or non-conformance procedure?	"htqf3">-
Q4	Do you have a customer complaint procedure?	"htqf4">-