JavaScript/jQuery to download file via POST with JSON data

by

letronje‘s solution only works for very simple pages. document.body.innerHTML += takes the HTML text of the body, appends the iframe HTML, and sets the innerHTML of the page to that string. This will wipe out any event bindings your page has, amongst other things. Create an element and use appendChild instead.

$.post('/create_binary_file.php', postData, function(retData) {
  var iframe = document.createElement("iframe");
  iframe.setAttribute("src", retData.url);
  iframe.setAttribute("style", "display: none");
  document.body.appendChild(iframe);
});

Or using jQuery

$.post('/create_binary_file.php', postData, function(retData) {
  $("body").append("<iframe src="" + retData.url+ "" style="display: none;" ></iframe>");
});

What this actually does: perform a post to /create_binary_file.php with the data in the variable postData; if that post completes successfully, add a new iframe to the body of the page. The assumption is that the response from /create_binary_file.php will include a value ‘url’, which is the URL that the generated PDF/XLS/etc file can be downloaded from. Adding an iframe to the page that references that URL will result in the browser promoting the user to download the file, assuming that the web server has the appropriate mime type configuration.

More Related Contents:

  1. Add CORS header to an http request using Ajax
  2. Difference between .ajaxSubmit() vs .submit()
  3. jQuery Ajax POST example with PHP
  4. jQuery AJAX submit form
  5. jQuery load more data on scroll
  6. how to bypass Access-Control-Allow-Origin?
  7. What is AJAX and how does it work? [duplicate]
  8. What’s the best way to retry an AJAX request on failure using jQuery?
  9. Getting all selected checkboxes in an array
  10. jQuery get textarea text
  11. Loading local files with Javascript without a web server
  12. Cross domain POST request is not sending cookie Ajax Jquery
  13. Catching 302 FOUND in JavaScript
  14. JQuery Ajax – How to Detect Network Connection error when making Ajax call
  15. AJAX jQuery refresh div every 5 seconds
  16. Ajax jquery success scope
  17. cross-origin ‘Authorization’-header with jquery.ajax()
  18. Rails flash notice via ajax
  19. How do I abort image load requests without using window.stop()
  20. Cross-origin resource sharing (CORS) concept
  21. How to load all server side data on initial vue.js / vue-router load?
  22. JQuery Ajax Post results in 500 Internal Server Error
  23. JQuery $.ajax() post – data in a java servlet
  24. AJAX Page Download progress
  25. Using jQuery AJAX to download a binary file
  26. How to post an image in base64 encoding via .ajax?
  27. Upload file to my google drive with Google Apps Script (NO FORM IN GOOGLE)
  28. jQuery DataTables “No Data Available in Table”
  29. Set Request Header jQuery Ajax
  30. ‘append’ called on an object that does not implement interface FormData

Leave a Comment