javascript - 单击按钮后下载 CSV 文件

标签 javascript php jquery csv

大家早上好, 当用户单击“导出 CSV”按钮时,我需要强制下载 csv 文件,我看到很多页面(此处和谷歌)并尝试了很多东西,但任何东西都对我有用。 我有一个带有此按钮的主页,单击它会向另一个制作 csv 文件的页面发送 POST 请求(使用 Javascript 和 ajax),理论上会下载该文件。 这是主页的代码:

<html>
<head>
<script  type="text/javascript"  src="http://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.4/Chart.min.js"></script>
</head>
<?php   
    $filter="<button id='exportCSV' >Export CSV</button><br/></div>";
    echo $filter 
?>
<script>

  $(function() {
      $("#exportCSV").click(function(){
          var query="select * from thcu_cabtemphpc order by timetag desc limit 300";
          var table="thcu_cabtemphpc";
          //alert(query+"  "+table);
          //alert(dataString);
          $.ajax({
              type: "POST",
              url: "exportCSV.php",
              data: {cvsExp: query, table:table},
              success: function(result){
                  alert("Export in progress");
                  //$("#export").html(result);

              }
          });
         });
      });
      </script>
</html>

当然这只是一个测试,我有另一个主页,用户可以在其中选择查询和表。 这是ExportCSV.php的代码

<html>
<body>
<?php

include('connection.php');
function array2csv($bd, $query, $id){
    $sql = mysql_query($query);
    $day = gmdate("d-M-Y");
    $offset   = +2 * 3600; // timezone offset for UTC-13
    $utcTime  = gmdate( 'd.m.Y H:i:s' );
    $milliseconds ="".round(microtime(true) * 1000);
    $val= substr($milliseconds,8,10);
    //echo $val;
    $valor = gmdate( 'd-m-Y_H-i-s-'.$val, time() + $offset );
    $name= $day."_".$id."data_export_".$valor.".csv";


    $fp = fopen($name, 'w');

    while ($res=mysql_fetch_row($sql)) {
        $count = 0;
        foreach ($res as $val) {
            if ($count == 0){
                $data = gmdate("Y-m-d H:i:s", substr(($val/10000000) - 12219292800, 0,10));
                $arr[$count] = $data;
                $count++;
            } else {
                $arr[$count] = $val;
            }

        }
        $delimiter=",";

        fputcsv($fp,$arr,$delimiter);
    }
    //fpassthru($fp);
    fclose($fp);        
    header('Content-Type: application/octet-stream');
    header('Content-Disposition: attachment; filename="' . $name . '.csv"');
    header('Content-Length: ' . filesize($name)); 
    echo readfile($name);

}

    if(isset($_POST["cvsExp"])) {
        $query=$_POST["cvsExp"];
        $id=$_POST["table"];
        //download_send_headers("data_export_".gmdate("Y-m-d").".csv");
        array2csv($bd,$query,$id);
        die();
    }
?></body>
</html>

我尝试这样的代码,但不起作用,我尝试用文本/csv 替换应用程序/八位字节,我尝试插入 echo readfile($name) 或仅 readfile($name) 但任何工作。这样做的结果是在 webroot 内创建一个文件,这不好,我希望浏览器下载该文件。 非常感谢。

编辑:我尝试仅执行带有下载脚本的页面并且它可以工作,问题是当我用ajax调用它时!!!怎么可能?错误在哪里?

最佳答案

我没有检查你的内部代码,但CSV肯定不能以 <html> 开头标签!您只需回复 CSV 内容,删除除 <php> 之外的所有标签.

例如:

<?php

include('connection.php');
function array2csv($bd, $query, $id){
    $sql = mysql_query($query);
    $day = gmdate("d-M-Y");
    $offset   = +2 * 3600; // timezone offset for UTC-13
    $utcTime  = gmdate( 'd.m.Y H:i:s' );
    $milliseconds ="".round(microtime(true) * 1000);
    $val= substr($milliseconds,8,10);
    //echo $val;
    $valor = gmdate( 'd-m-Y_H-i-s-'.$val, time() + $offset );
    $name= $day."_".$id."data_export_".$valor.".csv";


    $fp = fopen($name, 'w');

    while ($res=mysql_fetch_row($sql)) {
        $count = 0;
        foreach ($res as $val) {
            if ($count == 0){
                $data = gmdate("Y-m-d H:i:s", substr(($val/10000000) - 12219292800, 0,10));
                $arr[$count] = $data;
                $count++;
            } else {
                $arr[$count] = $val;
            }

        }
        $delimiter=",";

        fputcsv($fp,$arr,$delimiter);
    }
    //fpassthru($fp);
    fclose($fp);        
    header('Content-Type: application/octet-stream');
    header('Content-Disposition: attachment; filename="' . $name . '.csv"');
    header('Content-Length: ' . filesize($name)); 
    echo readfile($name);

}

    if(isset($_POST["cvsExp"])) {
        $query=$_POST["cvsExp"];
        $id=$_POST["table"];
        //download_send_headers("data_export_".gmdate("Y-m-d").".csv");
        array2csv($bd,$query,$id);
        die();
    }
?>

我刚刚删除了标题和尾随 <html><body>标签

关于javascript - 单击按钮后下载 CSV 文件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46928448/

相关文章:

javascript - 使用 window.getComputedStyle 的错误 css 信息

javascript - 删除 VuetifyJS v-tabs 组件的 header

php - Blade 中的条件扩展

javascript - jQuery 工具提示在 IE 中不起作用

jquery - 如何获取body元素的高度

php - google Drive api (PHP) 中不推荐使用身份验证方法

javascript - 从 JSON 配置文件加载到 HTML 文件中?

javascript - 在 IE9 中不将任何内容从 Javascript 传递到 VBScript

PHP 变量到 Javascript 变量

php - 数据库和表