- ベストアンサー
JS エクスプローラーからのＤ＆Ｄで作表したい
前回はiframeからの情報で親ページに作表するように 検討しました。（https://okwave.jp/qa/q10136205.html） しかし、セキュリティ上の制限でできないようだと判断して 諦めました。（できる方は是非ご教示願います） 今回は、エクスプローラーで ファイルＡＰＩ（Drag&Drop）を用いて作表することを 検討しています。 できるだけシンプルなコードでは、どうなりますか？ スキルをお持ちの方のお力添えをお願い申し上げます。 （HTML素材は、前回のものをお使いいただけます）
- retorofan
- お礼率86% (337/389)
- JavaScript
- 回答数2
- ありがとう数2
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
＃１です。訂正です。 １行目が <!DOCTYPE html> でした。 -- 追記 <!DOCTYPE html> <meta charset="utf-8"> <title></title> <style> #AREA { border:2px red solid; width: 400px; height: 100px; text-align: center; } td.num { text-align: right; color: blue;} th { background: gray; color: white; padding: 0 3ex;} </style> <body> <p id="AREA"> この領域にファイルをドラッグ&ドロップ </p> <table id="RESULT" border="1"></table> <script> class DD { #init(target) { target.addEventListener ('dragover', this, false); target.addEventListener ('drop', this, false); } constructor (target, callBackFunc) { this.target = target; this.callBackFunc = callBackFunc; this.#init (target); } handleEvent (event) { event.preventDefault (); switch (event.type) { case 'dragover' : event.dataTransfer.dropEffect = 'copy'; break; case 'drop' : let [file] = event.dataTransfer.files; if (file) { this.callBackFunc (file); } break; } } } //__________________ class FileLoader { constructor (file, callBackFunc) { this.callBackFunc = callBackFunc; let reader = new FileReader (); reader.readAsText (file); reader.addEventListener ('load', this, false); } handleEvent (event) { this.callBackFunc (event.target.result); } } //__________________ function demo () { function textToAry (text) { let lines = text.trim ().split (/\r\n|\r|\n/g), ary = lines.map (row => row.split (/\t/g)); return ary; } function ary2table (ary = [], tbody = document.createElement ('tbody)')) { const th = document.createElement ('th'); for (let row of ary) { let tr = tbody.insertRow (); for (let cell of row) { cell = cell.trim (); if (0 === cell.indexOf ('#')) { td = tr.appendChild (th.cloneNode (false)); cell = cell.slice (1); } else { td = tr.insertCell (); if (/^[+-]?\d{1,3}(,\d{3})*(.\d+)?$/.test (cell)) { td.classList.add ('num'); } } td.textContent = cell; } } return tbody; } function cbFunc0 (file) { new FileLoader (file, cbFunc1); } function cbFunc1 (data) { ary2table (textToAry (data), RESULT); } new DD (AREA, cbFunc0); } demo (); </script>
その他の回答 (1)
- babu_baboo
- ベストアンサー率51% (268/525)
シンプルなのか？ <!DOCTYPE hrml> <meta charset="utf-8"> <title></title> <style> #A { border:2px red solid; width: 400px; height: 100px; text-align: center; } </style> <body> <p id="A"> この領域にファイルをドラッグ&ドロップ </p> <table id="B" border="1"></table> <script> const C=(_,__=new FileReader())=>(__.addEventListener('load',D),__.readAsText(_)), D=({target:{result:_}})=>E(_.split(/\r\n|\r|\n/g).map(_=>_.split(/\t/g)),B), E=(a,b)=>a.reduce((b,a)=>(a.reduce((c,d)=>(c.insertCell().append(d),c),b.insertRow()),b),b); A.addEventListener('dragover',_=>(_.preventDefault(),_.dataTransfer.dropEffect = 'copy')); A.addEventListener('drop',(_,__=_.dataTransfer.files)=>((_.preventDefault(),__&&C(__[0])))); A.dropzone='copy'; </script>
お礼
ご回答ありがとうございます。 勉強させていただきます。
お礼
ご回答ありがとうございます。 勉強させていただきます。