如何强制下载 .csv 文件而非在浏览器中打开(HTML)?

11

当我点击下载按钮时,它会链接到一个新的感谢网页,并在2秒后从SD卡上下载csv文件。

但是,文件并没有被下载,而是在浏览器中显示。以下是我的代码。

每次如何获得下载选项?请不要提供php代码,因为我对html不熟悉。

我不想在打开.csv文件后使用“另存为”选项保存。

    <!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~将在运行时为我提供文件名。

3个回答

10

目前最安全的解决方案是设置响应头。

现代浏览器 支持为 锚点(anchor) 元素设置 download 属性,该属性用于指定文件将被下载时的名称:

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


当用户点击“开始下载”按钮时,我将转到感谢页面并开始下载。现在,用户要再次点击“下载SO标志”才能下载文件。我们难道不能用其他方式吗? - Hari
您只能有一个页面,包括两个部分:一个用于下载演示文稿,另一个是“感谢您的下载”,最初被隐藏。单击后切换所显示的部分。如何实现这一点是另一个问题,并且有多种解决方案:CSS、Javascript。 - B0Andrew
使用download是一个好方法,除非你不得不支持像IE11这样的傻瓜浏览器。在这种情况下,将Content-Type设置为text/csv对我有用。 - Clint Eastwood

4
你可以使用下载属性。
<a href="Document.pdf" download="Document.pdf">Download the pdf</a>

这是一个HTML5属性。


看起来你正在重复一个已有的问题答案。请阅读这个如何回答以提供高质量的答案。 - thewaywewere

1

使用PHP,将以下内容添加到您的头文件中:

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

1
你可以使用HTML 5方法:<a href="example.csv" download>点击这里</a>从链接处下载。但由于它是HTML5,我认为您不能依赖它在旧浏览器中的工作。 - Matthew Lymer
@Mathew Lymer,当我点击一个按钮时,我该如何实现这个PHP代码? - セアンデエ

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接