フロントエンドjsがcsvファイルをエクスポートする(aタグを使用する)

8898 ワード

前言
ファイルをエクスポートするには、一番多くの方法を使いますか?それともサーバー側で処理しますか?例えば、jspではレスポンスを使う方式です.
しかし、webの先端を使いたいと思ってもページの内容を導き出すことができますか?たとえば、ページの表をエクスポートします.
この需要には必ず答えがあります.各ブラウザに対して処理はちょっと違っています.(主にIEと他のブラウザの違いです).
IEではActiveXObjectを用いて実現し、firefoxとChromeではaタグ(またはjs)を使って実現することができます.ここでは主に他のブラウザでの実装について説明します.
aラベルでの実装


<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">downloada>
  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="#">downloada>
  body>
html>

中国語の問題があるcsvをエクスポートします.
以上は全部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="#">downloada>    
  body>
html>

ここでは2つの変更があります.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-chrome http://stackoverflow.com/questions/23816005/anchor-tag-download-attribute-not-working-bug-in-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;

BlobとURLを使ってパッケージ化と変換します.問題は解決します.ここで中国語の問題に会ったら、上の処理と同じです.1.ページのcharsetはgb 2312に設定してください.(UTF-8に設定してもいいです.)2.加えて\u feff BOMヘッドの具体的なコードは類似しています.

data = "\ufeff"+data;
var blob = new Blob([data], { type: 'text/csv,charset=UTF-8'});

Python静的方法(staticmethod)、クラス方法(classimethod)、__strの使い方

17.Spring Boot統合Duboを遊ぶ