0

アプリケーション ( CLIENT SIDE ) から大量の CSV ファイルを作成してエクスポートしようとしています。エクスポート部分については、これまでにたどってきた道です (参考までに、UI 部分には jquery mobile も使用しています)。

  1. <a>HTMLで作成しますhref='#
  2. ファイル名、ファイルの内容 (文字列)、および値をそれぞれ渡し、jquery を使用してとその属性を設定downloadします。targethref<a>_blank

これは、より明確にするためのコードです。

HTML

 <a href="#" id="btn1" data-role="button">download 1</a>

Jクエリ

$("#btn1").attr({
    'download' : 'file1.csv',
    'href' : "file;one",
    'target' : '_blank'
});

結果のボタンは正常に機能し、ファイルは次のように正しくダウンロードされます: FIDDLE (ダウンロードされたファイルは壊れているようですが、フィドルだと思います..ローカルではうまく機能します)

ここで、前に述べたように、一度に複数の CSV ファイルをエクスポートする必要があります。私のアプローチは、<a>必要な数だけ作成し、それぞれdownloadに 、targetおよびhref属性を設定してから、各ボタンのクリックを順番にトリガーする を<a>作成することです。download_all-buttonこれはコードです：

HTML

<div id="mypage" data-role="page">
    <a href="#" id="btn1" data-role="button">download 1</a>
    <a href="#" id="btn2" data-role="button">download 2</a>
    <a href="#" id="btn3" data-role="button">download 3</a>
    <a href="#" id="downloadall" data-role="button" >DOWNLOAD ALL</a>
</div>

Jクエリ

$("#btn1").attr({
    'download' : 'file1.csv',
    'href' : "file;one",
    'target' : '_blank'
});
$("#btn2").attr({
    'download' : 'file2.csv',
    'href' : "file;two",
    'target' : '_blank'
});
$("#btn3").attr({
    'download' : 'file3.csv',
    'href' : "file;three",
    'target' : '_blank'
});
$("#downloadall").on("click", function(){
   document.getElementById("btn1").click();
   document.getElementById("btn2").click();
   document.getElementById("btn3").click();
});

繰り返しますが、ここにフィドルがあります: FIDDLE DOWNLOAD ALL

これもうまくいくようです。今質問：

  1. 正しいアプローチですか？「JSクライアント側を使用してcsvをエクスポートする」ことについて、インターネット上でこれ以上見つけられませんでした..
  2. を使用して動作し、.click()jQuery を呼び出して動作しないのはなぜ.trigger("click")ですか? (ここでフィドルを参照してください: TRIGGER CLICK
  3. Firefoxでは、そのコードはファイルをダウンロードする代わりに新しいタブを開くようです..download属性に関連していますか?

よろしくお願いいたします。

4

2 に答える 2

0

これを試して：

$("#downloadall").on("click", function(){
    document.getElementById("btn1").click()+document.getElementById("btn2").click()+document.getElementById("btn3").click();      
    /*document.getElementById("btn2").click();
      document.getElementById("btn3").click();*/
});

デモ

于 2013-09-07T09:37:29.550 に答える