Web端末jsがcsvファイルをエクスポートする(aタグを使用する)
3946 ワード
前言
ファイルをエクスポートするには、一番多くの方法を使いますか?それともサーバー側で処理しますか?例えば、jspではレスポンスを使う方式です.
しかし、webの先端を使いたいと思ってもページの内容を導き出すことができますか?たとえば、ページの表をエクスポートします.
この需要には必ず答えがあります.各ブラウザに対して処理はちょっと違っています.(主にIEと他のブラウザの違いです).
IEでActiveXObjectを使って実現し、firefoxとChromeで使用します. aタグ(またはjs)で実現できます.ここでは主に他のブラウザでの実装について説明します.
aラベルでの実装
直接例:
1.ダウンロードしたファイル名をdownloadで設定します.
2.hrefにdataを加える:text/txt;charset=utf-8 linkをクリックしてファイルをダウンロードします.エンコードはutf-8です.このコンマの後はファイルに保存されている内容です.
複数行、複数列でcsvファイルをエクスポートします.
csvファイルはExcelで開けてもいいです.テーブルをエクスポートするなら、Excelを使うと便利です.
問題はどのように支店、分列しますか?
理論上:分列使用、番号分割、支店用.
以上のようにしてもいいです.列を分けることができますが、改行しません.見たところ知らないようです.
解決策はエンコーディング/
以上は全部utf-8符号を使っています.中国語を理論的にエクスポートするのは問題ではないはずです.
ただし、csv形式をエクスポートすると、Excelを使って開けば、中国語は文字化けですが、他のテキストプログラムで開くのは正常です.
原因はBOMヘッドが一つ足りないからです. \ufeff
加えてすべて正常になりました.
1.ページのcharsetはgb 2312に設定する必要があります.
2.加えて\u feff BOMヘッド
Chromeダウンロードのファイル名
以上はaのdownload属性を使ってダウンロードのファイル名と拡張子を指定できます.しかし、Chromeが実行すると、Chromeがこれを無視していることが分かります.
ダウンロード名は「ダウンロード」または「ダウンロード」です.
インターネットで検索してみます.Chromeというbugがあります.
stackoverflowの2つの記事を参照してください.
http://stackoverflow.com/questions/23962284/download-attribute-on-a-tag-doesnt-work-in-chromehttp://stackoverflow.com/questions/23816005/anchor-tag-download-atribute-not-working-bug-inn-chrome-35-0-1916-114
以上の二つの文章は気にしなくてもいいです.この問題が解決できるかどうか、解決方法は何ですか?
ソリューションを直接貼り付ける:
ここで中国語の問題に会ったら、上の処理方法と同じです.
1.ページのcharsetはgb 2312(UTF-8に設定しても良い)に設定する必要があります.
具体的なコードは類似しています.
ファイルをエクスポートするには、一番多くの方法を使いますか?それともサーバー側で処理しますか?例えば、jspではレスポンスを使う方式です.
しかし、webの先端を使いたいと思ってもページの内容を導き出すことができますか?たとえば、ページの表をエクスポートします.
この需要には必ず答えがあります.各ブラウザに対して処理はちょっと違っています.(主にIEと他のブラウザの違いです).
IEでActiveXObjectを使って実現し、firefoxとChromeで使用します. aタグ(またはjs)で実現できます.ここでは主に他のブラウザでの実装について説明します.
aラベルでの実装
直接例:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="author" content="oscar999">
<title></title>
</head>
<body>
<a id="test" download="downlaod.txt" href="data:text/txt;charset=utf-8,download Test Data">download</a>
</body>
</html>
1.ダウンロードしたファイル名をdownloadで設定します.
2.hrefにdataを加える:text/txt;charset=utf-8 linkをクリックしてファイルをダウンロードします.エンコードはutf-8です.このコンマの後はファイルに保存されている内容です.
複数行、複数列でcsvファイルをエクスポートします.
csvファイルはExcelで開けてもいいです.テーブルをエクスポートするなら、Excelを使うと便利です.
問題はどのように支店、分列しますか?
理論上:分列使用、番号分割、支店用.
以上のようにしてもいいです.列を分けることができますが、改行しません.見たところ知らないようです.
解決策はエンコーディング/
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="author" content="oscar999">
<title>
</title>
<script>
function clickDownload(aLink)
{
var str = "col1,col2,col3
value1,value2,value3";
str = encodeURIComponent(str);
aLink.href = "data:text/csv;charset=utf-8,"+str;
aLink.click();
}
</script>
</head>
<body>
<a id="test" onclick="clickDownload(this)" download="downlaod.csv" href="#">download</a>
</body>
</html>
以上は全部utf-8符号を使っています.中国語を理論的にエクスポートするのは問題ではないはずです.
ただし、csv形式をエクスポートすると、Excelを使って開けば、中国語は文字化けですが、他のテキストプログラムで開くのは正常です.
原因はBOMヘッドが一つ足りないからです. \ufeff
加えてすべて正常になりました.
<head>
<meta http-equiv="content-type" content="text/html; charset=gb2312">
<meta name="author" content="oscar999">
<title>
</title>
<script>
function clickDownload(aLink)
{
var str = " 1, 2, 3
1, 2, 3";
str = encodeURIComponent(str);
aLink.href = "data:text/csv;charset=utf-8,\ufeff"+str;
aLink.click();
}
</script>
</head>
<body>
<a id="test" onclick="clickDownload(this)" download="downlaod.csv" href="#">download</a>
</body>
</html>
1.ページのcharsetはgb 2312に設定する必要があります.
2.加えて\u feff BOMヘッド
Chromeダウンロードのファイル名
以上はaのdownload属性を使ってダウンロードのファイル名と拡張子を指定できます.しかし、Chromeが実行すると、Chromeがこれを無視していることが分かります.
ダウンロード名は「ダウンロード」または「ダウンロード」です.
インターネットで検索してみます.Chromeというbugがあります.
stackoverflowの2つの記事を参照してください.
http://stackoverflow.com/questions/23962284/download-attribute-on-a-tag-doesnt-work-in-chromehttp://stackoverflow.com/questions/23816005/anchor-tag-download-atribute-not-working-bug-inn-chrome-35-0-1916-114
以上の二つの文章は気にしなくてもいいです.この問題が解決できるかどうか、解決方法は何ですか?
ソリューションを直接貼り付ける:
var blob = new Blob([data], { type: 'text/csv' }); //new way
var csvUrl = URL.createObjectURL(blob);
document.getElementById("mylink").href = csvUrl; ここで中国語の問題に会ったら、上の処理方法と同じです.
1.ページのcharsetはgb 2312(UTF-8に設定しても良い)に設定する必要があります.
具体的なコードは類似しています.
data = "\ufeff"+data;
var blob = new Blob([data], { type: 'text/csv,charset=UTF-8'});