2017-02-28 1 views
0

페이지가로드 될 때 자동으로 다운로드되도록이 tabletocsv 코드를 변환하려고 할 때 벽에 부딪칩니다. 나는 페이지가 준비되었을 때 버튼을 자동으로 클릭하는 별도의 기능을 포함하여 다양한 것을 시도했다. 아무것도, 어떤 아이디어를 일하고있다?클릭시보다 document.ready에서 csv를 다운로드하십시오.

<a href="#" id="daily" class="export"><button class="download">Download Report</button></a> 

나는 또한 매일 "ID를 사용하려고 :

$(document).ready(function() { 

function exportTableToCSV($table, filename) { 

    var $rows = $table.find('tr:has(td)'), 

     // Temporary delimiter characters unlikely to be typed by keyboard 
     // This is to avoid accidentally splitting the actual contents 
     tmpColDelim = String.fromCharCode(11), // vertical tab character 
     tmpRowDelim = String.fromCharCode(0), // null character 

     // actual delimiter characters for CSV format 
     colDelim = '","', 
     rowDelim = '"\r\n"', 

     // Grab text from table into CSV formatted string 
     csv = '"' + $rows.map(function (i, row) { 
      var $row = $(row), 
       $cols = $row.find('td'); 

      return $cols.map(function (j, col) { 
       var $col = $(col), 
        text = $col.text(); 

       return text.replace(/"/g, '""'); // escape double quotes 

      }).get().join(tmpColDelim); 

     }).get().join(tmpRowDelim) 
      .split(tmpRowDelim).join(rowDelim) 
      .split(tmpColDelim).join(colDelim) + '"'; 

      // Deliberate 'false', see comment below 
    if (false && window.navigator.msSaveBlob) { 

        var blob = new Blob([decodeURIComponent(csv)], { 
       type: 'text/csv;charset=utf8' 
     }); 


     window.navigator.msSaveBlob(blob, filename); 

    } else if (window.Blob && window.URL) { 
        // HTML5 Blob   
     var blob = new Blob([csv], { type: 'text/csv;charset=utf8' }); 
     var csvUrl = URL.createObjectURL(blob); 

     $(this) 
       .attr({ 
        'download': filename, 
        'href': csvUrl 
       }); 
      } else { 
     // Data URI 
     var csvData = 'data:application/csv;charset=utf-8,' + encodeURIComponent(csv); 

        $(this) 
      .attr({ 
        'download': filename, 
       'href': csvData, 
       'target': '_blank' 
       }); 
    } 
} 

// This must be a hyperlink 
$(".export").on('click', function (event) { 
    // CSV 
    var d = new Date(); 
    var args = [$('#output>table'), d+'heartbeat.csv']; 

    exportTableToCSV.apply(this, args); 

    // If CSV, don't do event.preventDefault() or return false 
    // We actually need this to be a typical hyperlink 
}); 
}) 

나는 여기에 클릭 기능을 변경하는 일 것이라고 생각하지만 그렇지 않습니다 :

$(".export").ready(function (event) { 
    var d = new Date(); 
    var args = [$('#output>table'), d+'heartbeat.csv']; 

    exportTableToCSV.apply(this, args); 

}); 

HTML을 "링크 대신 버튼에. 여기

테스트를 위해 jfiddle 수있는 링크입니다 : 내가 $(".download").trigger("click");을 추가

https://jsfiddle.net/db6uqLtz/

+0

_ "이 기능은 클릭 기능을 변경하면 효과가있을 것이라고 생각하지만 실제로는 그렇지 않습니다. 왜냐하면 준비된 이벤트는 각 요소가 아닌 창 수준에서 실행되기 때문입니다. 페이지에서. – CBroe

+1

간단한 '$ ('.export ') 트리거 ('클릭 ')'이 끝나지 않았습니까? – CBroe

+0

다운로드가 아니라 #으로 연결되었다는 가정하에 링크가 실행되고 있음을 알 수있었습니다. – KevMoe

답변

1

하고 그것이 마치 마법처럼 일했다.

$(document).ready(function() { 

function exportTableToCSV($table, filename) { 

    var $rows = $table.find('tr:has(td)'), 

     // Temporary delimiter characters unlikely to be typed by keyboard 
     // This is to avoid accidentally splitting the actual contents 
     tmpColDelim = String.fromCharCode(11), // vertical tab character 
     tmpRowDelim = String.fromCharCode(0), // null character 

     // actual delimiter characters for CSV format 
     colDelim = '","', 
     rowDelim = '"\r\n"', 

     // Grab text from table into CSV formatted string 
     csv = '"' + $rows.map(function (i, row) { 
      var $row = $(row), 
       $cols = $row.find('td'); 

      return $cols.map(function (j, col) { 
       var $col = $(col), 
        text = $col.text(); 

       return text.replace(/"/g, '""'); // escape double quotes 

      }).get().join(tmpColDelim); 

     }).get().join(tmpRowDelim) 
      .split(tmpRowDelim).join(rowDelim) 
      .split(tmpColDelim).join(colDelim) + '"'; 

      // Deliberate 'false', see comment below 
    if (false && window.navigator.msSaveBlob) { 

        var blob = new Blob([decodeURIComponent(csv)], { 
       type: 'text/csv;charset=utf8' 
     }); 


     window.navigator.msSaveBlob(blob, filename); 

    } else if (window.Blob && window.URL) { 
        // HTML5 Blob   
     var blob = new Blob([csv], { type: 'text/csv;charset=utf8' }); 
     var csvUrl = URL.createObjectURL(blob); 

     $(this) 
       .attr({ 
        'download': filename, 
        'href': csvUrl 
       }); 
      } else { 
     // Data URI 
     var csvData = 'data:application/csv;charset=utf-8,' + encodeURIComponent(csv); 

        $(this) 
      .attr({ 
        'download': filename, 
       'href': csvData, 
       'target': '_blank' 
       }); 
    } 
} 

// This must be a hyperlink 
$(".export").on('click', function (event) { 
    // CSV 
    var d = new Date(); 
    var args = [$('#output>table'), d+'heartbeat.csv']; 

    exportTableToCSV.apply(this, args); 

    // If CSV, don't do event.preventDefault() or return false 
    // We actually need this to be a typical hyperlink 
}); 

//Added this, and it does wheat you want. 
$(".download").trigger("click"); 

}) 

$(".export").ready(function (event) { 
    var d = new Date(); 
    var args = [$('#output>table'), d+'heartbeat.csv']; 

    exportTableToCSV.apply(this, args); 

}); 
관련 문제