How to forcefully download .csv file instead of getting in open on browser in html

Question

When I click download button, it link to new thanks webpage and after 2 sec start download .csv file from SD card.

Instead of downloading the file, it getting displayed on browser. Below is my code.

How can I get download option every time? Please no php code, as I am new to html.

I don't want to save using save as option after .csv file open browser.

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
        <head>
            <title>Monitoring System</title>
            <link href="/mchp.css" rel="stylesheet" type="text/css" />
            <script src="/mchp.js" type="text/javascript"></script>
        </head>

        <body>
            <div id="shadow-one">
                <div id="shadow-two">
                    <div id="shadow-three">
                        <div id="shadow-four">
                            <div id="page">
                                <div>
                                    <div>
                                        <div>
                                            <div id="title">    
                                                <div class="right">Interface</div>
                                                <div class="left">Overview</div>
                                            </div>

                                            <div id="content">
                                                <h1>Monitoring System</h1>

                                                <table style="padding-left: 10px;">
                                                    <div id="lcontent">
                                                    <div id="llogindiv" ><h1>Thanks for downloading...</h1></div>
                                                    <META HTTP-EQUIV="refresh" CONTENT="2;~GetEventFile~;";>
                                                </table>

                                            </div>
                                        </div>
                                        <div class="spacer">&nbsp;</div>
                                        <div id="footer">Copyright &copy; Monitoring System</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </body>
    </html>

~GetEventFile~ will give me file name at run time.

Andrei Bucurei · Accepted Answer · 2016-01-29 10:32:18Z

10

At this point the safe solution is to set the response headers.

Modern browsers support download attribute for anchor elements which is used to specify the name of the file as it will be downloaded:

<a href="http://sstatic.net/stackexchange/img/logos/so/so-logo.png" download="logo.png">Download SO Logo</a>

answered Jan 29, 2016 at 10:32

Andrei Bucurei

2,47819 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Hari Over a year ago

I am moving to thanks page and starting download when user click start download button. Now to download file user again have to click "Download SO Logo". Can't we do any other way?

Andrei Bucurei Over a year ago

You can have only one page with two sections one for download presentation and one for 'thanks for downloading' which is initially hidden. On click you switch the displayed section. How you this is yet another question and there are multiple solutions: CSS, Javascript

Clint Eastwood Over a year ago

Using download is the way to go unless you don't have to support silly browsers like IE11. In that case, setting the Content-Type to text/csv worked for me.

Al Quarashi · Accepted Answer · 2017-05-28 16:32:12Z

4

You can use the download attribute

<a href="Document.pdf" download="Document.pdf">Download the pdf</a>

This a HTML5 Attribute.

answered May 28, 2017 at 16:32

Al Quarashi

1072 bronze badges

1 Comment

thewaywewere Over a year ago

It seems that you are repeating an existing answer of the question. Please read this how-to-answer for providing a quality answer.

Matthew Lymer · Accepted Answer · 2016-01-29 09:10:30Z

1

Using PHP, add this to your headers;

header('Content-Type: application/csv');
header('Content-Disposition: attachment; filename=example.csv');
header('Pragma: no-cache');
readfile("/filepath/example.csv");

answered Jan 29, 2016 at 9:10

Matthew Lymer

9776 silver badges10 bronze badges

2 Comments

Matthew Lymer Over a year ago

Well you can use the HTML 5 approach; <a href="example.csv" download>Click here</a> for downloading from a link. But with it being HTML5, I don't think you can rely on this working in older browsers.

セアンデエ Over a year ago

@Mathew Lymer how can I implement this php code when I click a button?

Collectives™ on Stack Overflow

How to forcefully download .csv file instead of getting in open on browser in html

3 Answers 3

3 Comments

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related