2017-05-03 13 views
1

Webページの表に表示されるデータに基づいてCSVファイルを作成しようとしています。私のcsvファイルからBOMヘッダを削除するには?

問題

私は「CSVファイルに保存」機能をトリガーするたびに、ファイルはExcelで開くだろうが、それは個々のフィールド(カンマ区切りを使用して)を解析しません。すべてが常に1つの列に表示されます。それは適切に異なる行を壊すでしょう。 多くのテスト/トラブルシューティングとstackoverflowの助けを借りれば、私の本当の問題はBOMヘッダーが追加されていて、それを台無しにしているようだということです。メモ帳++でcsvファイルを開き、BOMヘッダーを削除するようにエンコードを変更してからExcelでファイルを開くと、うまく見えます。

コード

これは、コードは次のようになります。(注:非IEのパスが正常に動作します。)

function exportTableToCSV($tableName, fileName) { 
    var csv = GetCellValues($tableName); 
    console.log(csv); 
    console.log("filename is:" + fileName); 

    if (navigator.userAgent.search("Trident") >= 0) { 

    //this is the path that is execute in IE10 browser... 
    window.CsvExpFrame.document.open("text/html", "replace"); 
    window.CsvExpFrame.document.write(csv); 
    window.CsvExpFrame.document.close(); 
    window.CsvExpFrame.focus(); 
    window.CsvExpFrame.document.execCommand('SaveAs', true, fileName + ".csv"); 
    } else { 
    var uri = "data:text/csv;charset=utf-8," + escape(csv); 
    var downloadLink = document.createElement("a"); 
    downloadLink.href = uri; 
    downloadLink.download = fileName + ".csv"; 
    document.body.appendChild(downloadLink); 
    downloadLink.click(); 
    document.body.removeChild(downloadLink); 
    } 
}; 

質問

どのように私はプログラム的に削除することができますBOMヘッダ?

  1. はそうのようなエンコーディングを指定/変更しようとしました:(すべての行私は

    はこれまでのところ、私は次のコードの変更をしようとしたこれまでに試した何

    ここでコメントされています...しかし、私はそれぞれを繰り返して、エクスポートを再試行しました)

    //window.CsvExpFrame.document.open("text/html "、" replace "); //window.CsvExpFrame.document.open('data:text/csv;windows-1252; ') //window.CsvExpFrame.document.open('data:text/csv;charset=utf-8;') //window.CsvExpFrame.document.open('data:text/csv;charset=utf-8 ')

  2. のでようなヘッダを削除しようとしました:

    // CSV = csv.replace (/ \ uFFFD/g、 '') csv = csv.replace(/ \ uFEFF/g、 '') window.CsvExpFrame.document.write(csv);

これまでのところ、何も機能していません。あなたが私に何か提案があれば、それを感謝します。私はstackoverflow上の他の同様の記事を読んできましたし、それらを試していますが、これまでのところそれはないです。私はhavent 'javascript固有のものを見つけた..

ありがとう。

EDIT 1

この質問を投稿して以来、私はいくつかの追加/役立つ成果物を発見した:私はメモ帳++でファイルを開くと

、エンコーディングはUCS-2 LE BOM」に設定されています"私は明示的にそうようBOMヘッダを追加するために自分のコードを変更しようとしました

"UTF-8 BOM" fixes the issue. 
    "UTF-8" (aka no BOM) fixes the issue 
    "UCS-2 BE BOM" almost works but it adds some funky characters the first field's header, so it looks like this: 

    þÿ"Group Name" 

::私は、ファイルを保存することに気付きました

window.CsvExpFrame.document.open("text/html", "replace"); 
window.CsvExpFrame.document.write("\uFEFF"+csv); // ADD BOM 
//window.CsvExpFrame.document.write(csv); 
window.CsvExpFrame.document.close(); 
window.CsvExpFrame.focus(); 
window.CsvExpFrame.document.execCommand('SaveAs', true, fileName + ".csv"); 

しかし、メモ帳のとおり++、このコードは」didnのエンコードを変更しないでください。それでもLE BOMに設定されています。
最後に、このCSVファイルの2つのバージョンを作成しました。両方ともWebアプリケーションによって生成されました。しかし、2番目のファイルでは、Notepad ++を使ってエンコーディングを変更して動作させました。その後、私は "Meld"を使って2つのファイルのdiffを試みましたが、同じものとして表示されます。

EDIT 2

がIEのトライデントのための条件のチェックではありませんが、コードだけで、常にこのないように、私はロジックを変更した場合:次のエラーで

function exportTableToCSV($tableName, fileName) { 
    var csv = GetCellValues($tableName); 
    console.log(csv); 
    console.log("filename is:" + fileName); 
    var uri = "data:text/csv;charset=utf-8," + encodeURIComponent(csv); 
    var downloadLink = document.createElement("a"); 
    downloadLink.href = uri; 
    downloadLink.download = fileName + ".csv"; 
    document.body.appendChild(downloadLink); 
    downloadLink.click(); 
    document.body.removeChild(downloadLink); 
} 

IE爆弾を:

SCRIPT122:システムコールに渡されたデータ領域が小さすぎます。

「downloadLink.click();」で失敗しています。コール。ここで

+0

「Trident」のケースを忘れずに他のアプローチを使用してください。これは安全で安全な方法であり、ブラウザがIE Tridentの場合にも当てはまります。 –

+0

@JavierReyそれは良い提案です。しかし、それはエラーで失敗します。編集2 – dot

+0

を参照してくださいああ、それは私が思ったように良いアプローチではありません。リンクURLのサイズはブラウザでは制限されていますが、IEでは2080個、他のサイズではさらに大きくなりますが、大きなCSV文字列では小さすぎます。このダウンロード制限の問題の回避策を見つけて、ここに戻ってきます。 –

答えて

1

私が考える解決策をObjectURLに、その後、BlobにCSV Stringを変換する、である、そして、IE10 +のため、navigator.msSaveBlobを使用して:

function exportCSV(csv, filename) { 
    if (!filename) {filename = 'export.csv';} 
    var blob = new Blob([csv], {type: 'text/csv;charset=utf-8;'}); 
    if (!navigator.msSaveBlob) { 
    var link = document.createElement("a"); 
    var url = URL.createObjectURL(blob); 
    link.setAttribute("href", url); 
    link.setAttribute("download", filename); 
    link.style.visibility = 'hidden'; 
    document.body.appendChild(link); 
    link.click(); 
    document.body.removeChild(link); 
    URL.revokeObjectURL(blob); 
    } else { 
    navigator.msSaveBlob(blob, filename); // IE 10+ 
    } 
} 

実装後:

でテスト
function exportTableToCSV($tableName, fileName) { 
    var csv = GetCellValues($tableName); console.log(fileName, csv); 
    exportCSV(csv, fileName); 
} 

Chrome、Firefox、IE11など、何千もの行があります。

+0

完璧に動作します。どうもありがとう – dot

関連する問題