如何将文件名和文件扩展名添加到window.open方法，将JSON数组导出到CSVstring，然后导入到JavaScript文件中？
我有下面的代码，在以下问题上find： https : //stackoverflow.com/a/4130939/1055971
function DownloadJSON2CSV(objArray) { var array = typeof objArray != 'object' ? JSON.parse(objArray) : objArray; var str = ''; for (var i = 0; i < array.length; i++) { var line = ''; for (var index in array[i]) { line += array[i][index] + ','; } line.slice(0,line.Length-1); str += line + '\r\n'; } window.open( "data:text/csv;charset=utf-8," + escape(str)) } 这个代码工作得很好。 它下载文件并保存，但问题是没有办法给文件添加自定义标题，而且文件也没有扩展名保存。 例如，调用save函数时，文件名默认是“download”，没有文件扩展名。 当我通过Windows文件系统（如.csv）添加扩展名并再次打开文件时，所有数据都完好保存。
我希望find一种方法来预先设置文件名和文件types，然后下载。 有任何想法吗？
创build不可见的链接元素（锚点标记），并初始化具有所需文件名的元素的下载属性，并附加到新创build的窗口中，并以编程方式打开并调用创build元素上的单击事件。
$(document).ready(function(){ $('button').click(function(){ var data = $('#txt').val(); if(data == '') return; JSONToCSVConvertor(data, "Sample Report", true); }); }); function JSONToCSVConvertor(JSONData, ReportTitle, ShowLabel) { //If JSONData is not an object then JSON.parse will parse the JSON string in an Object var arrData = typeof JSONData != 'object' ? JSON.parse(JSONData) : JSONData; var CSV = ''; //Set Report title in first row or line CSV += ReportTitle + '\r\n\n'; //This condition will generate the Label/Header if (ShowLabel) { var row = ""; //This loop will extract the label from 1st index of on array for (var index in arrData[0]) { //Now convert each value to string and comma-seprated row += index + ','; } row = row.slice(0, -1); //append Label row with line break CSV += row + '\r\n'; } //1st loop is to extract each row for (var i = 0; i < arrData.length; i++) { var row = ""; //2nd loop will extract each column and convert it in string comma-seprated for (var index in arrData[i]) { row += '"' + arrData[i][index] + '",'; } row.slice(0, row.length - 1); //add a line break after each row CSV += row + '\r\n'; } if (CSV == '') { alert("Invalid data"); return; } //Generate a file name var fileName = "MyReport_"; //this will remove the blank-spaces from the title and replace it with an underscore fileName += ReportTitle.replace(/ /g,"_"); //Initialize file format you want csv or xls var uri = 'data:text/csv;charset=utf-8,' + escape(CSV); // Now the little tricky part. // you can use either>> window.open(uri); // but this will not work in some browsers // or you will not get the correct file extension //this trick will generate a temp <a /> tag var link = document.createElement("a"); link.href = uri; //set the visibility hidden so it will not effect on your web-layout link.style = "visibility:hidden"; link.download = fileName + ".csv"; //this part will append the anchor tag and remove it after automatic click document.body.appendChild(link); link.click(); document.body.removeChild(link); }
.txtarea{ max-width:100%; min-height:200px; display:block; width:100%; } .mydiv{ padding:10px; } .gen_btn{ padding:5px; background-color:#743ED9; color:white; font-family:arial; font-size:13px; border:2px solid black; } .gen_btn:hover{ background-color:#9a64ff; }
<div class='mydiv'> <textarea id="txt" class='txtarea'>[{"Vehicle":"BMW","Date":"30, Jul 2013 09:24 AM","Location":"Hauz Khas, Enclave, New Delhi, Delhi, India","Speed":42},{"Vehicle":"Honda CBR","Date":"30, Jul 2013 12:00 AM","Location":"Military Road, West Bengal 734013, India","Speed":0},{"Vehicle":"Supra","Date":"30, Jul 2013 07:53 AM","Location":"Sec-45, St. Angel's School, Gurgaon, Haryana, India","Speed":58},{"Vehicle":"Land Cruiser","Date":"30, Jul 2013 09:35 AM","Location":"DLF Phase I, Marble Market, Gurgaon, Haryana, India","Speed":83},{"Vehicle":"Suzuki Swift","Date":"30, Jul 2013 12:02 AM","Location":"Behind Central Bank RO, Ram Krishna Rd by-lane, Siliguri, West Bengal, India","Speed":0},{"Vehicle":"Honda Civic","Date":"30, Jul 2013 12:00 AM","Location":"Behind Central Bank RO, Ram Krishna Rd by-lane, Siliguri, West Bengal, India","Speed":0},{"Vehicle":"Honda Accord","Date":"30, Jul 2013 11:05 AM","Location":"DLF Phase IV, Super Mart 1, Gurgaon, Haryana, India","Speed":71}]</textarea> <button class='gen_btn'>Generate File</button> </div>
//taken from https://stackoverflow.com/questions/283956/is-there-any-way-to-specify-a-suggested-filename-when-using-data-uri#15832569 function downloadWithName(uri, name) { function eventFire(el, etype){ if (el.fireEvent) { (el.fireEvent('on' + etype)); } else { var evObj = document.createEvent('Events'); evObj.initEvent(etype, true, false); el.dispatchEvent(evObj); } } var link = document.createElement("a"); link.download = name; link.href = uri; eventFire(link, "click"); } downloadWithName("data:text/csv;charset=utf-8," + escape(str), "file.csv"); //didnt work when I tested in ff25
似乎没有一个好的方法来保证跨浏览器的行为