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


当前回答

以下方法适用于IE10+、Edge、Opera、FF和Chrome浏览器:

const saveDownloadedData = (fileName, data) => {
    if(~navigator.userAgent.indexOf('MSIE') || ~navigator.appVersion.indexOf('Trident/')) { /* IE9-11 */
        const blob = new Blob([data], { type: 'text/csv;charset=utf-8;' });
        navigator.msSaveBlob(blob, fileName);
    } else {
        const link = document.createElement('a')
        link.setAttribute('target', '_blank');
        if(Blob !== undefined) {
            const blob = new Blob([data], { type: 'text/plain' });
            link.setAttribute('href', URL.createObjectURL(blob));
        } else {
            link.setAttribute('href', 'data:text/plain,' + encodeURIComponent(data));
        }

        ~window.navigator.userAgent.indexOf('Edge')
            && (fileName = fileName.replace(/[&\/\\#,+$~%.'':*?<>{}]/g, '_')); /* Edge */

        link.setAttribute('download', fileName);
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
    }
}

因此,只需调用函数:

saveDownloadedData('test.txt', 'Lorem ipsum');

其他回答

下载文件扩展或没有扩展的例子中,我使用的是JSON。您可以添加数据和扩展。你可以使用mac地址。Json在这里,如你所愿。如果你想添加一个扩展名,在那里添加,否则,只写没有扩展名的文件名。

let myJson = JSON.stringify(yourdata);
    let element = document.createElement('a');
    element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(myJson));
    element.setAttribute('download', 'MAC-Addresses.json');
    element.style.display = 'none';
    document.body.appendChild(element);
    element.click();
    document.body.removeChild(element);

如果你只是想把一个字符串转换成可以下载的,你可以使用jQuery尝试一下。

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

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!');

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

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

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

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

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

我很高兴使用FileSaver.js。它的兼容性非常好(IE10+和其他版本),而且使用起来非常简单:

var blob = new Blob(["some text"], {
    type: "text/plain;charset=utf-8;",
});
saveAs(blob, "thing.txt");