お世話になります。
CSVファイルへ変換したファイルをダウンロードする処理を実装していますが、
なぜか初回押下でダウンロードが開始されません。
手順は以下の通りです。
- ローカル上から箇条書きに書かれたテキストファイルを用意.
- 「ファイルを選択」よりtest.txtを選択.
- 「CSVファイルに変換する」を押下.
→ 読み込み中の画像は表示されるがダウンロードが始まらない。2回押下以降でダウンロードが開始される。
HTML/CSS/JavaScriptのコードとテキストファイルは以下の通りです。
お手数ですが実装誤り等があればご教示お願いいたします。
HTML
1<!DOCTYPE html> 2<html> 3<head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 5 <title>タイトル</title> 6 <script src="https://code.jquery.com/jquery-3.0.0.min.js"></script> 7 <script type="text/javascript"> 8 9 function OnButtonClick(isExport) { 10 var fileRef = document.getElementById('File1'); 11 if ("" != fileRef.value) { 12 GetFileData_(isExport, function(result) { 13 // 読み込み中をストップ. 14 $('#loader-bg').delay(900).fadeOut(800); 15 $('#loader').delay(600).fadeOut(300); 16 $('#output').css('display','block'); 17 }); 18 // ■ 読み込み中を表示. 19 var h = $(window).height(); 20 $('#output').css('display','none'); 21 $('#loader-bg, #loader').height(h).css('display', 'block'); 22 } else { 23 alert("ファイルを選択してください.") 24 } 25 } 26 27 function csvDownload_(exportData) { 28 var bom = new Uint8Array([0xEF, 0xBB, 0xBF]); 29 var content = exportData; 30 var blob = new Blob([ bom, content ], { "type" : "text/csv" }); 31 32 var fileRef = document.getElementById('File1'); 33 var filename = fileRef.files[0].name.replace('.txt', '.csv'); 34 if (window.navigator.msSaveBlob) { 35 window.navigator.msSaveBlob(blob, filename); 36 37 // msSaveOrOpenBlobの場合はファイルを保存せずに開ける 38 window.navigator.msSaveOrOpenBlob(blob, filename); 39 alert("もう一度ダウンロードボタンを選択してください.") 40 } else { 41 document.getElementById("download_csv").download = filename; 42 document.getElementById("download_csv").href = window.URL.createObjectURL(blob); 43 } 44 } 45 46 var GetFileData_ = function(isExport, callback) { 47 var fileRef = document.getElementById('File1'); 48 var outFrame = document.getElementById('output'); 49 if (1 <= fileRef.files.length) 50 { 51 var reader = new FileReader(); 52 53 // ■ 読み込み時の処理. 54 reader.onload = function (theFile) { 55 var outhtml = theFile.target.result; 56 57 var textArray = outhtml.split(/\r\n|\r|\n/); 58 var reArray = new Array(); 59 60 for (var i=0 ; i<textArray.length ; i++) { 61 var tmp = textArray[i]; 62 if ( true == CheckCharcter_(tmp) ) reArray.push(tmp); 63 } 64 65 if ( true == isExport ) { 66 var exportData = ""; 67 for (var i=0 ; i<reArray.length ; i++) { 68 var str1 = reArray[i] + ","; 69 for (var j=0 ; j<reArray.length ; j++) { 70 if ( i != j ) { 71 var str2 = reArray[j]; 72 exportData += str1 + str2 + "\n"; 73 } 74 } 75 } 76 csvDownload_(exportData); 77 } 78 else { 79 var outputHtmlStr = "" 80 for (var i=0 ; i<reArray.length ; i++) { 81 var str1 = reArray[i] + " + "; 82 for (var j=0 ; j<reArray.length ; j++) { 83 if ( i != j ) { 84 var str2 = reArray[j] + " + "; 85 outputHtmlStr += str1 + str2 + "<br>"; 86 /* 87 for (var k=0 ; k<reArray.length ; k++) { 88 if ( (i != k) && (j != k) ){ 89 var str3 = reArray[k]; 90 outputHtmlStr += str1 + str2 + str3 + "<br>"; 91 } 92 } 93 */ 94 } 95 } 96 } 97 outFrame.innerHTML = outputHtmlStr; 98 } 99 callback("OK"); 100 } 101 102 // ■ 読み込み開始(非同期処理). 103 reader.readAsText(fileRef.files[0], "shift-jis"); 104 } 105 } 106 107 function CheckCharcter_(str) { 108 if ( ("" != str) && ("\t" != str) && 109 ( -1 == str.indexOf('■')) && ( -1 == str.indexOf('【') ) ) { 110 return true; 111 } 112 return false; 113 } 114 115 </script> 116</head> 117<style type="text/css"> 118 #loader-bg { 119 display: none; 120 position: fixed; 121 width: 100%; 122 height: 100%; 123 top: 0px; 124 left: 0px; 125 background: #000; 126 z-index: 1; 127 } 128 #loader { 129 display: none; 130 position: fixed; 131 top: 50%; 132 left: 50%; 133 width: 200px; 134 height: 200px; 135 margin-top: -100px; 136 margin-left: -100px; 137 text-align: center; 138 color: #fff; 139 z-index: 2; 140 } 141</style> 142<body> 143 <input type="file" id="File1" /> 144 <input type="button" id="Button1" value="開く" onclick="OnButtonClick(false);" /><br> 145 <a id="download_csv" href="#" onclick="OnButtonClick(true)">CSVファイルに変換する<a/> 146 <!-- <input type="button" id="download_csv" value="ダウンロード" onclick="OnButtonClick(true);" /><br> --> 147 <div id="loader-bg"> 148 <div id="loader"> 149 <img src="img/img-loading.gif" width="80" height="80" alt="Now Loading..."/> 150 <p>Now Loading...</p> 151 </div> 152 </div> 153 <div id="output"></div> 154</body> 155</html>
Text
1aaa 2bbb 3ccc 4ddd
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/11/23 11:50
2017/11/23 12:43