How to display download file popup (not a new window)? - javascript

I try to display "save as" popup on IE using javascript (jquery is ok too).
The expected result is:
I use this code:
window.open("some url on my server", "_self");
and I get:
How can I make it look like in the first picture? as a popup at the bottom of the page, and not modal like I get..

You can't do this with JavaScript or jQuery. You need to set the HTTP headers of the request as follows:
header('Content-disposition: attachment; filename=excel1.xlsx');
header('Content-type: application/vnd.ms-excel');
The above is a PHP example. Telling the browser to handle the request as an octet stream will prompt the user with the Save As... dialogue.

Related

pdf download using php and onclick function

I have the following code.
<div onClick="registerationform.pdf">something</div>
<?php
header('Content-disposition: attachment; filename=registerationform.pdf');
header('Content-type: application/pdf');
readfile('registerationform.pdf');
This code directly downloads the output if the page is loaded. But I need the pdf to get downloaded only if the something button is clicked.Help me
Php code is executed before any page content is shown or any javascript is executed, and not exactly sequentially as you see it in your example.
What you want is probably to create another php page downloadpdf.php which includes those headers you specified, and redirect the user to that page through a link:
link.php:
Download PDF
Note: target="_blank" is added here so the actual page is not redirected but instead the new page is opened in a new tab-> the browser downloads the file and immediately closes the tab, "feeling" like it's an immediate download from the current page you are on.
downloadpdf.php
<?php
header('Content-disposition: attachment; filename=registerationform.pdf');
header('Content-type: application/pdf');
readfile('registerationform.pdf');

Javascript+PHP XMLHttpRequest download prompt

What I am doing is to using PHP to get an external file, and send it to client’s browser. But the following code doesn’t pop up the downloading prompt. Using Chrome's developer tool, I can see in Network -> Response that the data is correctly fetched. But nothing happens to the browser.
<?php
header("Content-Disposition: attachment;filename=Example.zip");
header('Content-Description: File Transfer');
header("Content-Type: application/force-download");
header('Content-Transfer-Encoding: binary');
header("Content-Length: 512");
header("HTTP/1.1 206 Partial Content");
$x=fopen("http://www.example.com/example.zip","r");
echo fread($x,512);
fclose($x);
exit;
?>
UPDATE: In fact, I have figured out where the problem was: I did not invoke the PHP using user's click, but javascript's XMLHttpRequest. When I directly visit my above PHP page, everything works perfectly. Sorry about that. But now the question would be: is it possible to trigger download prompt using javascript XMLHttpRequest?
UPDATE 2: So here is what I wish to accomplish: I have a page with a "download" button, clicking the button will trigger javascript XMLHttpRequest to invoke the PHP page (in this way, the browser address bar will remain the same, i.e. it will not visit the PHP page). I would like to use this background XMLHttpRequest to invoke the PHP page, which returns the content (with all legit headers, i.e. Content-Type, ...) that will invoke the download prompt for the user.
Don’t use this line:
header("Content-Type: application/force-download");
If you are forcing a zip file to download, use the actual MIME type for zip files:
header("Content-Type: application/zip");

how to download the pdf through ajax call to nodejs server

It need page refresh to download the attachment response.so how i am suppose to be reload the page partially without reload the complete page using GET method ajax call.
The PDF download require page reload to show save as dialog.
In facebook they are doing the photo download without refresh the whole page.They reload the page partially.
any one help me?
I think facebook is simply providing download link to image with force download headers. You can do it like this:
Do ajax request to get the url to your force download script, and redirect/open window popup to that link.
<?php
header('Content-Type: application/pdf');
header('Content-Disposition: attachment; filename=filename.pdf');
header('Pragma: no-cache');
readfile("/path/to/filename.pdf");

How to show the save dialog using HTML

How can I force the save file download dialog box when I click an <a> tag?. There is a PDF file available on a remote server and when a user clicks that link we want to download that PDF file to their local system.
Thanks
Normally when you link a file that file will always display inside of the browser because the browser loads it and automatically determines the content type based on the file extension. So when you click on a link like a jpg image pdf etc the browser knows it's an image/file and will display that file. You can of course always use the browser short cut menu and use the Save Target As option to save the file to disk.
If you want to do this automatically when a link is clicked from the server side, you have to send the file back yourself rather and add a couple of custom headers to the output. The way to do this is to use Response.TransmitFile() to explicitly send the file from your ASP.NET application and then add the Content Type and Content-Disposition headers.
So You neded to use headers liek below:
header('Content-Disposition: attachment; filename="filename.pdf"');
Here is an exapmle might help you :
http://www.west-wind.com/weblog/posts/2007/May/21/Downloading-a-File-with-a-Save-As-Dialog-in-ASPNET
change your header values..
Ex
header('Content-Disposition: attachment; filename="downloaded.pdf"')
path = "path/to/file.pdf";
$filename = "file.pdf";
header('Content-Transfer-Encoding: binary'); // For Gecko browsers mainly
header('Last-Modified: ' . gmdate('D, d M Y H:i:s', filemtime($path)) . ' GMT');
header('Accept-Ranges: bytes'); // For download resume
header('Content-Length: ' . filesize($path)); // File size
header('Content-Encoding: none');
header('Content-Type: application/pdf'); // Change this mime type if the file is not PDF
header('Content-Disposition: attachment; filename=' . $filename); // Make the browser display the Save As dialog
What he is looking for is not a open save dialogue while downloading something from the host.
He is looking to open a file from the client's file system. You must use the input type file, to do so. But you will not get much privileges to manipulate that using javascript.
And there is no way to prompt a window's save dialogue through standard html.
We need ActiveX or Flash to do it.

directly Download Image by click on Download button

i want to create wallpapers page for my website. and i want people can download by clicking on download button directly rather than image view in browser and user right click on that and then save as image. is there any solution with java script?
You need to force the content type of the image being sent by the server. There isn't a way to do this client-side.
Content-Type: application/octet-stream
Content-Disposition: attachment;filename=myimage.png
You can force a download via a PHP (or other server-side language) script like this:
$file = $_GET['file'];
header('Content-Description: File Transfer');
header("Content-type: application/octet-stream");//notice this content-type, it will force a download since browsers think that's what they should do with .exe files
header("Content-disposition: attachment; filename= ".$file."");
readfile($file);
Then in your JavaScript code you can direct users to this script with the GET variable file being populated by the JavaScript.
$('a.download_link').on('click', function (event) {
event.preventDefault();//prevent the normal click action from occuring
window.location = '/path/to/server-side.php?file=' + encodeURIComponent(this.href);
});
This will add a click event handler to any links that have the .download_link class to direct the browser to the PHP script above to force a download.
Just use a hidden iframe that you set the source attribute on when you click the button.
HTML
<input class="download" href="http://site.com/imageHandler.ashx" value="Download"/>
Javascript
$("input.download").click(function() { $("iframeID").attr("src", $(this).attr("href")); });
You also need to set the content-type using the custom image handler (whichever server-side language you are using)

Categories