有什么方法可以在客户端创建一个文本文件,并提示用户下载它,而不与服务器进行任何交互? 我知道我不能直接写到他们的机器上(安全等),但是我可以创建并提示他们保存它吗?


当前回答

HTML5浏览器的简单解决方案…

function download(filename, text) { var element = document.createElement('a'); element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text)); element.setAttribute('download', filename); element.style.display = 'none'; document.body.appendChild(element); element.click(); document.body.removeChild(element); } form * { display: block; margin: 10px; } <form onsubmit="download(this['name'].value, this['text'].value)"> <input type="text" name="name" value="test.txt"> <textarea name="text"></textarea> <input type="submit" value="Download"> </form>

使用

download('test.txt', 'Hello world!');

其他回答

如果文件包含文本数据,我使用的一种技术是将文本放入textarea元素中,并让用户选择它(在textarea中单击,然后按ctrl-A),然后复制,然后粘贴到文本编辑器。

function download(filename, text) {
  var element = document.createElement('a');
  element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text));
  element.setAttribute('download', filename);

  element.style.display = 'none';
  document.body.appendChild(element);

  element.click();

  document.body.removeChild(element);
}



// Start file download.
download("hello.txt","This is the content of my file :)");

原文:https://ourcodeworld.com/articles/read/189/how-to-create-a-file-and-generate-a-download-with-javascript-in-the-browser-without-a-server

来自github.com/kennethjiang/js-file-download的js-file-download包处理浏览器支持的边缘情况:

查看源代码以查看它如何使用本页中提到的技术。

安装

yarn add js-file-download
npm install --save js-file-download

使用

import fileDownload from 'js-file-download'

// fileDownload(data, filename, mime)
// mime is optional

fileDownload(data, 'filename.csv', 'text/csv')

一个例子,IE 10+, Firefox和Chrome(没有jQuery或任何其他库):

function save(filename, data) {
    const blob = new Blob([data], {type: 'text/csv'});
    if(window.navigator.msSaveOrOpenBlob) {
        window.navigator.msSaveBlob(blob, filename);
    }
    else{
        const elem = window.document.createElement('a');
        elem.href = window.URL.createObjectURL(blob);
        elem.download = filename;        
        document.body.appendChild(elem);
        elem.click();        
        document.body.removeChild(elem);
    }
}

注意,根据您的情况,您可能还想调用URL。删除elem后,revokeObjectURL。根据URL.createObjectURL的文档:

每次调用createObjectURL()时,都会创建一个新的对象URL,即使您已经为同一个对象创建了一个URL。当你不再需要它们时,必须调用URL.revokeObjectURL()来释放它们。当文档被卸载时,浏览器会自动释放这些;但是,为了优化性能和内存使用,如果存在可以显式卸载它们的安全时间,则应该这样做。

根据@Rick的回答,这真的很有帮助。

如果你想以这种方式共享字符串数据,你必须转义字符串数据:

$('a.download').attr('href', 'data:application/csv;charset=utf-8,'+ encodeURI(data));

` 抱歉,我不能评论@Rick的回答,因为我目前在StackOverflow的声誉很低。

分享了一个编辑建议,但被拒绝了。