0

I'm trying to create and export from my application (CLIENT SIDE), a bunch of CSV files. For the export part, this is the path I've followed so far (FYI, I'm also using jquery mobile for the UI part):

  1. I create an <a> in the HTML with href='#
  2. I set download,target and href attributes of that <a> using jquery, passing respectively the filename, the file content (a string) and the _blank value.

This is the code, to make it more clear:

HTML

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

JQUERY

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

The resulting button works fine, the file is correctly downloaded as you can see here: FIDDLE (the downloaded file seems to be broken, but I think is a fiddle thing.. locally, it works great)

Now, as I said before, I need to export more than one CSV file at once. My approach is to create as many <a> as I need, set the download,target and href attributes for each <a> and then create a download_all-button that, sequentially, triggers each button's click. This is the code:

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>

JQUERY

$("#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();
});

Again, here's the fiddle : FIDDLE DOWNLOAD ALL

This seems to work too, great! Now the questions:

  1. is the right approach? I didn't find a lot more on the internet about "export a csv using JS client side"..
  2. why it does work using the .click() and it doesn't work calling jQuery .trigger("click")? (see fiddle here: TRIGGER CLICK
  3. In firefox, that piece of code seems to open new tabs instead of downloading the file.. is related to the download attribute?

Thanks in advance for your help, best regards

BeNdErR
  • 17,471
  • 21
  • 72
  • 103
  • 1
    As for firefox in point 3, check out your request headers when sending the csv to explicitly make it download: `Content-Disposition: attachment; filename="downloadedcsv.csv"` – Salketer Sep 07 '13 at 09:47

2 Answers2

2

  1. is the right approach? I didn't find a lot more on the internet about "export a csv using JS client side"..

    • I'd go with no. Consider downloading a single zip containing all the files in one lump. I'd go out on a limb and say some browsers will not like your approach and anti-spam tools will like it even less.

  2. why it does work using the .click() and it doesn't work calling jQuery .trigger("click")?

  3. In firefox, that piece of code seems to open new tabs instead of downloading the file.. is related to the download attribute?

    • target="_blank" means "open in new tab". Try target="_top" or target="_self".
Community
  • 1
  • 1
Paul Fleming
  • 24,238
  • 8
  • 76
  • 113
0

Try this:

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

DEMO

BeNdErR
  • 17,471
  • 21
  • 72
  • 103
Iren Patel
  • 729
  • 1
  • 10
  • 22
  • I don't get the poit of this answer.. you rewrote my working code – BeNdErR Sep 07 '13 at 09:41
  • you want click on downloadall button and download all file that for i am not write new code but some change in your code. – Iren Patel Sep 07 '13 at 09:44
  • the download all button was already working.. with the same code – BeNdErR Sep 07 '13 at 09:48
  • 1
    @IrenPatel You may want to try and explain what you have changed and why. I can see you are using the `+` operator between the calls. What do you suppose this achieves? As far as I understand, you're simply appending the results with no benefit... – Paul Fleming Sep 07 '13 at 09:53
  • can we download all file in one zip folder? – ResolveError Jun 24 '20 at 18:02