🙌🏻 🖐🏾 🛅 JavaScriptでOpen XML Excelファイルを開く 🗯️ 👊 👨‍🔬

アウトレットに関する情報をExcelからロジスティックスSaaSサービス「Ant Logistics」にアップロードするために、Webブラウザーを使用することにしました。通常、ファイルをサーバーにアップロードし、任意のライブラリを使用してデータベースにアップロードする方が簡単です。しかし、クライアントの各行の整合性を制御するために1行ずつダウンロードすることに興味があり、もちろん、誰もが宣伝するHTML5 FileAPIとドラッグアンドドロップを試してみました。

Excellは、カタログとOpen XML形式の XMLファイルを含むZIPアーカイブです。 JQueryはXMLの解析に優れていますが、zippyはありません。これを行うために、zip.jsライブラリがネットワークの広大な場所で見つかりました。これは素晴らしい仕事をしました。

それでは、アーカイブの内容を見てみましょう。

<div class="main"> <progress id="progress"></progress> <div class="filedrag" id="comps">  <span class="red"></span></div> <div class="result"></div> </div>

 var c = document.getElementById("comps"), FileDragHover = function (e) { e.stopPropagation(); e.preventDefault(); if(e.target.id==='comps') e.target.className = (e.type == "dragover" ? "filedrag hover" : "filedrag"); else c.className = (e.type == "dragover" ? "filedrag hover" : "filedrag"); } c.addEventListener("drop", function(e){ e.preventDefault(); c.className = "filedrag"; var files = e.target.files || e.dataTransfer.files; for (var i = 0, f; f = files[i]; i++) { if(f.name.toLowerCase().indexOf('xlsx')<=0) { alert('   Excel'); } else { zip.createReader(new zip.BlobReader(f), function(reader) { //     reader.getEntries(function(entries) { //       Excel console.info(entries) return false; }); }, function(error) { alert(": " + error) }); } } return false; }, false); c.addEventListener("dragover", FileDragHover, false); c.addEventListener("dragleave", FileDragHover, false);

結果はここで見ることができます。サンプルファイルをダウンロードし、フォームにドラッグします。

すべてのExcelブックアーカイブファイルのリストがコンソールに表示されます。コンソールに表示されたオブジェクトのプロパティには、ファイル名があります。ファイル名を使用して、必要なXMLファイルを探します。

アーカイブから2つのファイルが必要になります。

import.xlsx \ xl \ worksheets \ sheet [N] .xlsx
import.xlsx \ xl \ sharedStrings.xml

ここで：

sheet [N] .xlsx-実際のExcelシート、N-ブックの内部番号。

sharedStrings.xml-連想配列の文字列、シートの辞書。

必要なファイルのみを除外します。

 //     reader.getEntries(function(entries) { var a=[],st; for(var i in entries){ var e=entries[i]; var fn=e.filename.toLowerCase(); if(fn.indexOf("sheet")>0){ a.push(e); } else if(fn.indexOf("sharedstring")>0){ st=e; } } //     Excel console.info(a) //    console.info(st) return false; });

ファイルをアップロードしてコンソールを見ると、ここで結果を見ることができます。

次に、単純なセレクターでデータを抽出する必要があります。文字列辞書の場合はst t 、シート上のデータのあるテーブルエントリの場合はsheetdata rowです。

Excelシートのデータを表示する関数を追加します。

 printExcelData = function(sheets, strings) { var unzipProgress = document.getElementById("progress"); unzipProgress.style.display='block'; strings.getData(new zip.TextWriter(), function(text) { //          var i,st=$($.parseXML(decodeURIComponent(escape(text)))).find('si t'); for(i=0;i<st.length;++i) st[i]=$(st[i]).text(); //      var parseSheet=function(sheet){ var j,i,h,sh,d=[],s; sheet.getData(new zip.TextWriter(), function(text) { //      sh=$($.parseXML(decodeURIComponent(escape(text)))).find('sheetdata row'); //     sh.each(function(e){ var c=$(this).find('c'),ci,v,o={}; for(i=0;i<c.length;++i){ ci=$(c[i]); v=ci.find('v').text(); if(ci.attr('t')) v=st[v]; j=ci.attr('r').charCodeAt(0)-65; if(h) o[h[j]]=v; else o[j]=v; } if(h){ d.push(o) } else h=o; }); var id_name=""; for(i in h) if(h[i]=='Comp_Id'){ id_name=h[i]; break; } //   Comp_Id   ,    if(id_name=='Comp_Id') { unzipProgress.style.display='none'; //     s=""; for(i=0;i<Object.keys(h).length;i++) s+='<th>'+h[i]+'</th>'; $('.result thead tr').append(s) //   s=""; for(j=0; j<d.length; j++){ s+='<tr>'; for(i=0; i<Object.keys(h).length; i++){ s+='<td>'+d[j][h[i]].toString()+'</td>'; } s+='</tr>'; } $('.result tbody').append(s) sheets=[]; return; } if(sheets.length>0) parseSheet(sheets.pop()); }, function(current, total) { unzipProgress.value = current; unzipProgress.max = total; }); } parseSheet(sheets.pop()); }, function(current, total) { unzipProgress.value = current; unzipProgress.max = total; }); }

ChromeはクロスドメインでHTML File APIを使用することは犯罪であると見なしているため（ Uncaught SecurityError：ユーザーエージェントのセキュリティポリシーを突破しようとしました。 ）、最後の例をWebサーバーにアップロードしました。

ファイルをドラッグして、標準のHTMLテーブルを取得します。

PS

はい、今では判明したように、 JavaScript用のOpen XML SDKがありますが、これは別の記事のトピックです...

JavaScriptでOpen XML Excelファイルを開く

More articles: