如果我们在nodeJS服务器上,则可以编写标头,设置mime类型并发送:
res.header("Content-Disposition", "attachment;filename="+name+".csv"); res.type("text/csv"); res.send(200, csvString);
并且由于存在标题,浏览器将为命名的csv文件创建下载。
当在浏览器中生成有用的数据时,将其保存为CSV文件的一种解决方案是使用ajax,将其上传到服务器(也许可以选择将其保存在服务器上),然后让服务器使用这些标头将其发送回去,从而成为将csv下载回浏览器。
但是,我想要一个不涉及服务器乒乓球的100%浏览器解决方案。
因此,我想到可以打开一个新窗口,并尝试使用等效的META标签设置标题。
但这在最近的Chrome浏览器中对我不起作用。
我确实得到了一个新窗口,它包含csvString,但不充当下载。
我想我期望在底部选项卡中获得下载,或者在底部选项卡中获得具有空白下载的新窗口。
我想知道中继标记是否正确,或者是否还需要其他标记。
有没有一种方法可以在不将其插入服务器的情况下使其正常工作?
用于在浏览器中创建CSV的JsFiddle(不起作用-输出窗口,但没有下载)
var A = [['n','sqrt(n)']]; // initialize array of rows with header row as 1st item for(var j=1;j<10;++j){ A.push([j, Math.sqrt(j)]) } var csvRows = []; for(var i=0,l=A.length; i<l; ++i){ csvRows.push(A[i].join(',')); // unquoted CSV row } var csvString = csvRows.join("\n"); console.log(csvString); var csvWin = window.open("","",""); csvWin.document.write('<meta name="content-type" content="text/csv">'); csvWin.document.write('<meta name="content-disposition" content="attachment; filename=data.csv"> '); csvWin.document.write(csvString);
总有HTML5 download属性:
download
该属性(如果存在)表明作者打算将超链接用于下载资源,以便当用户单击链接时,将提示他们将其另存为本地文件。 如果属性具有值,则该值将用作用户单击链接时打开的“保存”提示中的预填充文件名。
该属性(如果存在)表明作者打算将超链接用于下载资源,以便当用户单击链接时,将提示他们将其另存为本地文件。
如果属性具有值,则该值将用作用户单击链接时打开的“保存”提示中的预填充文件名。
var A = [['n','sqrt(n)']]; for(var j=1; j<10; ++j){ A.push([j, Math.sqrt(j)]); } var csvRows = []; for(var i=0, l=A.length; i<l; ++i){ csvRows.push(A[i].join(',')); } var csvString = csvRows.join("%0A"); var a = document.createElement('a'); a.href = 'data:attachment/csv,' + encodeURIComponent(csvString); a.target = '_blank'; a.download = 'myFile.csv'; document.body.appendChild(a); a.click();
显然,有针对IE10和IE11的黑客,它不支持该download属性但是Edge_ 支持 。
var A = [['n','sqrt(n)']]; for(var j=1; j<10; ++j){ A.push([j, Math.sqrt(j)]); } var csvRows = []; for(var i=0, l=A.length; i<l; ++i){ csvRows.push(A[i].join(',')); } var csvString = csvRows.join("%0A"); if (window.navigator.msSaveOrOpenBlob) { var blob = new Blob([csvString]); window.navigator.msSaveOrOpenBlob(blob, 'myFile.csv'); } else { var a = document.createElement('a'); a.href = 'data:attachment/csv,' + encodeURIComponent(csvString); a.target = '_blank'; a.download = 'myFile.csv'; document.body.appendChild(a); a.click(); }