如何强制下载 .csv 文件而不是在 html 中打开浏览器答案

【问题标题】：How to forcefully download .csv file instead of getting in open on browser in html如何强制下载 .csv 文件而不是在 html 中打开浏览器
【发布时间】：2016-05-06 22:58:08
【问题描述】：

当我点击下载按钮时，它会链接到新的感谢网页，并在 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~ 会在运行时给我文件名。

【问题讨论】：

标签： html csv webpage

【解决方案1】：

使用 PHP，将其添加到您的标题中；

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

【讨论】：

你可以使用 HTML 5 方法； <a href="example.csv" download>Click here</a> 用于从链接下载。但由于它是 HTML5，我认为您不能依赖它在旧浏览器中工作。
@Mathew Lymer 当我点击一个按钮时如何实现这个 php 代码？

【解决方案2】：

此时安全的解决方案是设置响应头。

Modern browsers 支持anchor 元素的download 属性，用于指定下载文件的名称：

&lt;a href="http://sstatic.net/stackexchange/img/logos/so/so-logo.png" download="logo.png"&gt;Download SO Logo&lt;/a&gt;

【讨论】：

当用户单击开始下载按钮时，我将转到感谢页面并开始下载。现在要再次下载文件，用户必须单击“下载 SO 徽标”。我们不能做任何其他方式吗？
您只能有一个页面，其中有两个部分，一个用于下载演示，一个用于“感谢下载”，最初是隐藏的。单击时切换显示的部分。这是另一个问题，有多种解决方案：CSS、Javascript
使用download 是可行的方法，除非您不必支持像IE11 这样的愚蠢浏览器。在这种情况下，将Content-Type 设置为text/csv 对我有用。

【解决方案3】：

可以使用下载属性

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

这是一个 HTML5 属性。

【讨论】：

您似乎在重复该问题的现有答案。请阅读此how-to-answer 以提供高质量的答案。