Question

我想编写一个html代码，以便下载保存在文本文件中的用户输入的输入值。如下面的html，当按下“保存”按钮时，输入值应该作为.text文件保存在用户计算机中。

<html>

<head>
    <script type="text/javascript">
        function write_below(form) {
            var input = document.forms.write.input_to_write.value;
            document.getElementById('write_here').innerHTML = "Your input was:" + input;
            return false;
        }
    </script>
</head>

<!--Insert more code here-->

<body>
    <form name='write' onsubmit='return write_below(this);'>
        <input type="text" name='input_to_write'>
        <input type="button" value="save" />
    </form>
    <div id='write_here'></div>
</body>

</html>

任何人都可以帮我解决这个问题吗？

Answer 1

数据URI方案是一种URI方案（统一资源标识符方案），它提供了一种在网页中包含数据的方法，就像它们是外部资源一样。

您可以使用以下uri来模拟外部文本文件。只需将代码复制到地址栏即可查看会发生什么。

data:application/txt,Hello World!

完整代码或查看此fiddle：

<html>

<head>
    <title>Fake download via datauri</title>
</head>

<body>

    <textarea cols="50" rows="10" id="source">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</textarea>
    <br>
    <button type="button" id="save" title="Save as text file">Save</button>

    <script type="text/javascript">
        // when document is ready
        document.getElementById("save").onclick = function() {
            // when clicked the button
            var content = document.getElementById('source').value;
            // a [save as] dialog will be shown
            window.open("data:application/txt," + encodeURIComponent(content), "_self");
        }
    </script>
</body>

</html>

一些老式浏览器不支持此功能。 Full list

此外，如果浏览器拒绝请求，请确保内容不会太长。

Answer 2

您可以通过创建blob-url及其链接来实现。链接（而不是按钮！）必须具有download属性，该属性指定文件的默认名称。

但是，因为我不确定这个属性的兼容性，所以我设置了一个二进制mime类型，因为浏览器知道text/plain并且只是打开而不是显示下载窗口。

var text = "foo\nbar\nbaz";

var fileBlob = new Blob([text], {type: "application/octet-binary"});

var link = document.createElement("a");
link.setAttribute("href", URL.createObjectURL(fileBlob));
link.setAttribute("download", "HelloWorld.txt");
link.appendChild(document.createTextNode("Save file"));
document.body.appendChild(link);

Answer 3

通过使用以下PHP功能，您可以下载文件：

function dowld($path)
{
    // get the file mime type using the file extension
    $mime = get_mime_by_extension($path); // Build the headers to push out the file properly.
    header('Content-Description: File Download');
    header('Pragma: public');
    header('Expires: 0');
    header('Cache-Control: must-revalidate, post-check=0, pre-check=0');
    header('Cache-Control: private',false);
    header('Content-Type: '.$mime);
    header('Content-Disposition: attachment; filename="'.basename($path).'"');
    header('Content-Transfer-Encoding: binary');
    header('Connection: close');
    ob_clean();
    flush();
    readfile($path);
}

$ path 是指要下载的文件的路径。

例如：

dowld('./files/myfile.txt');

以HTML格式下载文本文件

3 个答案: