如何在特定按钮上使用Javascript和AJAX下载csv文件?

我正在使用PHP生成CSV字符串并通过AJAX将其发送到我的Javascript函数。</ p>

一个简单的按钮</ p>

 &lt; button id =“download”type =“button”onclick =“csvExport()”name =“button”&gt; CSV&lt  ; / button&gt; 
</ code> </ pre>

调用该函数,并从字符串中下载CSV文件。 我该如何处理?</ p>

我的PHP函数</ p>

  function exportCSV(){
$ profs = $ this-&gt; getAllDozent ();
$ profs = json_decode($ profs,true);
$ currentID = 0;
$ csv =“IDDOZENT,IDVERANSTALTUNG,BEZEICHNUNG,SWS,CREDITS,HAEUFIGKEIT_PA,FAKTOR_DOPPELUNG,SOMMER,WPF,KOSTEN_PA,\ n“;

// Iteriere durch教授Array
foreach($ profs as $ key =&gt; $ value){
$ currentID = $ value ['IDDOZENT'];

//HolefürID die Veranstaltungen
$ veranstaltungen = $ this-&gt; getVeranstaltungenByID($ currentID);
$ veranstaltungen = json_decode($ veranstaltungen,true);

// Nur wenn Veranstaltungen da sind,abrufen。
if($ veranstaltungen!=“NULL”){
foreach($ veranstaltungen as $ key =&gt; $ value){
$ csv = $ csv。$ currentID。“,”
。$ value ['IDVERANSTALTUNG']。“ ,“
。$ value ['BEZEICHNUNG']。”,“
。$ value ['SWS']。”,“
。$ value ['CREDITS']。”,“
。$ value [ 'HAEUFIGKEIT_PA']。“,”
。$ value ['FAKTOR_DOPPELUNG']。“,”
。$ value ['SOMMER']。“,”
。$ value ['WPF']。“,”

。$ val ue ['KOSTEN_PA']。“
”;
}
}
}

返回$ csv;
</ code> </ pre>

} </ p>

返回一个有效的csv字符串,如“a,b,c,d”</ code>。</ p>

我的Javascript看起来像:</ p >

  function csvExport(){
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function(){
if(this.readyState == 4&amp;&amp; this.status == 200){
console.log(this.responseText);
}
};
xmlhttp.open(“GET”,“csvExport.php”,true);
xmlhttp.send ();
}
</ code> </ pre>

在回调中,我想将 this.responseText </ code>下载为CSV文件。 这可能吗?</ p>
</ div>

展开原文

原文

I am generating a CSV string with PHP and send it via AJAX to my Javascript function.

A simple button

<button id="download" type="button" onclick="csvExport()" name="button">CSV</button>

Call that function and should download a CSV file from the string. How can I handle that?

My PHP Function

function exportCSV(){
$profs = $this->getAllDozent();
$profs = json_decode($profs, true);
$currentID = 0;
$csv = "IDDOZENT,IDVERANSTALTUNG,BEZEICHNUNG,SWS,CREDITS,HAEUFIGKEIT_PA,FAKTOR_DOPPELUNG,SOMMER,WPF,KOSTEN_PA,
";

// Iteriere durch Professor Array
foreach($profs as $key => $value){
  $currentID = $value['IDDOZENT'];

  //Hole für ID die Veranstaltungen
  $veranstaltungen = $this->getVeranstaltungenByID($currentID);
  $veranstaltungen = json_decode($veranstaltungen, true);

  //Nur wenn Veranstaltungen da sind, abrufen.
  if($veranstaltungen != "NULL"){
    foreach ($veranstaltungen as $key => $value) {
    $csv = $csv.$currentID.","
    .$value['IDVERANSTALTUNG'].","
    .$value['BEZEICHNUNG'].","
    .$value['SWS'].","
    .$value['CREDITS'].","
    .$value['HAEUFIGKEIT_PA'].","
    .$value['FAKTOR_DOPPELUNG'].","
    .$value['SOMMER'].","
    .$value['WPF'].","
    .$value['KOSTEN_PA']."
";
    }
  }
}

return $csv;

}

returns a valid csv string like that "a,b,c,d".

My Javascript looks like:

function csvExport(){
    var xmlhttp = new XMLHttpRequest();
    xmlhttp.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200){ 
            console.log(this.responseText);
        }
    };
    xmlhttp.open("GET", "csvExport.php", true);
    xmlhttp.send();
}

In the callback, I want to download the this.responseText as a CSV file. Is that possible?

1个回答



而不是ajax onreadystatechange处理程序中的 console.log </ code>调用此函数</ p>

function downloadAsFile(csv,fileName){
var file = new File([csv],fileName,{type:“text / csv”})
var anUrl = window.URL.createObjectURL(file)

var a = window.document.createElement('a');
a.href = window.URL.createObjectURL(file)
a.download = fileName;
a.click();
} \ n </ code> </ pre>
</ div>

展开原文

原文

Instead of console.log in ajax onreadystatechange handler call this function

function downloadAsFile(csv, fileName) {
  var file = new File([csv], fileName, { type: "text/csv" })
  var anUrl = window.URL.createObjectURL(file)
  var a = window.document.createElement('a');
  a.href = window.URL.createObjectURL(file)
  a.download = fileName;
  a.click();
}

dotdx80642
dotdx80642 这个对我有用。 谢谢!
接近 3 年之前 回复
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
立即提问