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


当前回答

下面这个函数是有效的。

 private createDownloadableCsvFile(fileName, content) {
   let link = document.createElement("a");
   link.download = fileName;
   link.href = `data:application/octet-stream,${content}`;
   return link;
 }

其他回答

下载文件扩展或没有扩展的例子中,我使用的是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));

对我来说,这工作得很完美,下载了相同的文件名和扩展名

<a href={“数据:应用程序/ octestream;charset=utf-16le;base64]下载= =

'title'是带扩展名的文件名,例如sample.pdf, waterfall.jpg等。

'file64'是base64内容,例如,ww6idewndasifnsawrpbmdty2fszudyb3vwoiair3jvdxagqiisie1lzgljywxwaxnpdezsyxrgwu6idm1lcbezw50ywxqyvvyy2vudgfnztogmjusifbyb2nlzhvyzvblcmnlbnq6idcwlkcffsb7ikdyywjoir3jvdxagqinsawrpbmdty2fszudyb3vwijir3jvdxagqiisik1lzgljyw50ywxqyxlwuiojm1lcjzw50ywxqyxljuvgvycnkgtgliiwiugf0awvudexpc3qiolt7ilbhdglbnro

我们可以使用URL api,特别是URL. createobjecturl()和Blob api来编码和下载几乎任何东西。

如果你的下载量很小,这很好:

document.body.innerHTML + = <a id="download" download="PATTERN. "json " href = " $ {URL。createObjectURL(新团([JSON。stringify(“HELLO WORLD”,null, 2))))} " > < / >点击我的 download.click () 下载。outerHTML = ""


如果您的下载量很大,那么不使用DOM,更好的方法是使用下载参数创建一个link元素,并触发单击。

注意link元素并没有被添加到文档中,但是点击仍然可以工作!这可以通过这种方式创建数百个Mo的下载,因为DOM没有被修改(否则DOM中的巨大URL可能是制表符冻结的来源)。

Const堆栈= { 一些:“东西”, 阿洛特:“他们的!” } BUTTONDOWNLOAD。Onclick =(函数(){ let j = document.createElement("a") j.download = "stack_"+Date.now()+".json" j.href = URL。createObjectURL(新团([JSON。Stringify (stack, null, 2)]) j.click () }) <按钮id = " BUTTONDOWNLOAD " >下载!< / >按钮


奖金!下载任何循环对象,避免错误:

TypeError:循环对象值(Firefox 循环结构JSON (Chrome和Opera) TypeError:循环 不支持在值参数中引用(Edge)

使用https://github.com/douglascrockford/JSON-js/blob/master/cycle.js

在本例中,下载json格式的文档对象。

/* JSON.decycle */ if(typeof JSON.decycle!=="function"){JSON.decycle=function decycle(object,replacer){"use strict";var objects=new WeakMap();return(function derez(value,path){var old_path;var nu;if(replacer!==undefined){value=replacer(value)} if(typeof value==="object"&&value!==null&&!(value instanceof Boolean)&&!(value instanceof Date)&&!(value instanceof Number)&&!(value instanceof RegExp)&&!(value instanceof String)){old_path=objects.get(value);if(old_path!==undefined){return{$ref:old_path}} objects.set(value,path);if(Array.isArray(value)){nu=[];value.forEach(function(element,i){nu[i]=derez(element,path+"["+i+"]")})}else{nu={};Object.keys(value).forEach(function(name){nu[name]=derez(value[name],path+"["+JSON.stringify(name)+"]")})} return nu} return value}(object,"$"))}} document.body.innerHTML += `<a id="download" download="PATTERN.json" href="${URL.createObjectURL(new Blob([JSON.stringify(JSON.decycle(document), null, 2)]))}"></a>` download.click()

适用于IE10的解决方案: (我需要一个csv文件,但它足以改变类型和文件名txt)

var csvContent=data; //here we load our csv data 
var blob = new Blob([csvContent],{
    type: "text/csv;charset=utf-8;"
});

navigator.msSaveBlob(blob, "filename.csv")