Tengo el siguiente código, que fue encontrado en la siguiente pregunta:
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))

}

Este código funciona muy bien. Descarga el archivo y lo guarda, pero el problema es que no hay una manera de agregar un título personalizado para el archivo, y también, el archivo se guarda con ninguna extensión. Por ejemplo, cuando la función de ahorro se llama, el nombre de archivo es ‘descargar’ por defecto sin la extensión de archivo. Al agregar una extensión a través del sistema de archivos de windows (como .csv) y abra el archivo de nuevo, todos los datos están perfectamente conservados.

Estoy con la esperanza de encontrar una manera de presintonía, el nombre de archivo y tipo de archivo antes de la descarga se lleva a cabo. Alguna idea?

InformationsquelleAutor jordan | 2013-11-08

2 Comentarios

  1. 2

    crear vínculo invisible elemento( etiqueta de anclaje) e inicializar descargar propiedad de un elemento con nombre de archivo que desee y anexar en la crea de nuevo en la ventana y abra y llamar mediante programación, haga clic en evento creado un elemento.

    JS:

    $(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);
    }

    CSS:

    .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;
    }

    HTML:

    <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>

    • No trabajo aquí, y cuando me integrar algo similar en mi proyecto me sale «Error – error de Red» en Chrome en mi mac
  2. -1
    //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

    Parece no ser una buena manera de garantizar el comportamiento de la cruz navegador

    • Voy a dar que un tiro de inmediato
    • Que no parece funcionar. El navegador no tiro un error, pero la secuencia de descarga era de la misma con el nombre de archivo predeterminado todavía ‘default’ sin extensión.
    • No funciona sin embargo.
    • Por favor, tenga en cuenta que yo no downvote su respuesta.
    • Hmm, ya que era sólo una conjetura no funciona de forma fiable de la cruz de los navegadores, aparentemente, stackoverflow.com/questions/283956/…

Dejar respuesta

Please enter your comment!
Please enter your name here