2

I have a local file called test.html. The path to this file (relative) is "../slides/test.html".

I would like to :

  • Have a button to download this file
  • Have a button to open this file in a new tab

How can i do these 2 things ?

I tried to get the file with ajax, i get data object containing html code of the file, but i don't know how to do to download and opening this file.

$.ajax({
    url: "../slides/test.html",
    success: function(data){
        alert(data);
    }
});

UPDATE

I solve the problem by doing this :

<ul class="buttonsList">
    <li><a href="#" id="fullscreenBtn">View in fullScreen</a></button></li>
    <li><a href="#" id="downloadBtn" download>Download</a></button></li>
</ul>

// Register click on download button
$("#downloadBtn").off().on('click', function() {
    var slideURL = $(".helpActive").attr("data-textTour-url");
    $('#downloadBtn').attr({href  : slideURL});
});

// Register click on download button
$("#fullscreenBtn").off().on('click', function() {
    var slideURL = $(".helpActive").attr("data-textTour-url");
    $('#fullscreenBtn').attr({target: '_blank', href  : slideURL});
});
wawanopoulos
  • 9,614
  • 31
  • 111
  • 166
  • 1
    Possible duplicate of [Download File Using Javascript/jQuery](http://stackoverflow.com/questions/3749231/download-file-using-javascript-jquery) – Marcos Pérez Gude Feb 10 '16 at 12:48
  • Maybe OT, but this can be interesting for you https://programmingistheway.wordpress.com/2015/04/16/saving-file-from-the-client-side-with-the-save-as-logic/ – Piero Alberto Feb 10 '16 at 12:50
  • The way to make this functionality cross-browser with all compatibility is to set a header server-side (like PHP) to force download. The open in new tab is a basic '90s html feature. – Marcos Pérez Gude Feb 10 '16 at 12:51
  • [filesaver.js](https://github.com/eligrey/FileSaver.js/) perhaps? – Jaromanda X Feb 10 '16 at 12:52

1 Answers1

4

For download 

<a href="path-to-file" download>Download</a>

For open in new tab

<a href="path-to-file" target="_blank">Open in new tab</a>