javascript - 在 Javascript 中发布并重定向以进行文件下载

标签 javascript php jquery post redirect

我已经阅读了此网站或其他网站上的许多文章( Redirect with POST to application/csv without formjQuery.post(), PHP and redirects 、...),但没有任何有值(value)的解决方案。 我的问题如下:

  1. 在我的网站(html5、JQuery)中,有一个表格。网站的一个特色 是将表导出为 csv 文件,该文件可用于 下载,
  2. 此功能的实现如下:

    2.1 调用 JavaScript 来提取表中的数据,

    2.2 这个 JS 重定向到 php 服务并作为参数传递数据。代码是 以下:

var url= jmcnet.request.getOrigin()+'/commons/php/dt_csv_export.php' ; location.href = url+"?action=generate&csv_type=export_task&csv_data="+encodeURIComponent(csv);

2.3 php脚本格式化输入(csv_data参数),写入临时文件并返回临时文件的内容。代码如下:

$h = @fopen($csv_file_name, 'w');
      fputcsv($h, $csv_row, ',', '"');
      fclose($h);
      // export file content to JS
      header('Content-Encoding: UTF-8');
   header('Content-Type: text/ csv; charset =UTF-8');
   header('Content-Disposition: attachment; filename=export-table.csv');
   header(' Pragma: no-cache');
   echo "\xEF\xBB\xBF"; // UTF-8 BOM
   readfile($csv_file_name);

2.4 php文件删除(取消链接)临时文件并退出,

我的问题是,当表很长时,调用的URL无效,并且JS对Php的调用失败。

所以,我想象了以下 3 种解决方案,但没有一个是明显的,并且都会导致其他问题:

  1. S1:在 JS 中不要执行 GET,而是执行 POST。所以csv_data的大小 不再重要了。问题是我会有内容 调用成功后 JS var 中的 csv 文件的内容,我不知道或 找到如何重定向到内容位于 JS var 中的页面?我 我想这样做会丢失所有 header 信息。
  2. S2:在JS中压缩csv_data参数并在Php中解压。 我只是不知道该怎么做,如果可能的话......
  3. S3:使用 POST 调用 php。修改Php返回的URL 临时文件,并在 JS 中重定向到这个临时 URL。 问题是我的 Php 必须在目录中生成一个文件 在互联网上直接可见,文件名必须是唯一的 读取文件后无法简单地删除该文件 浏览器(我讨厌 cron 或其他什么)。

我确信我不是第一个遇到此问题的人,因此我需要您的帮助来了解解决此问题的最佳实践。

最佳答案

我认为你可能把这个问题过于复杂化了。不需要所有 JS 重定向内容,您只需将表单操作属性指向 csv_export php 代码并使用 POST 发送数据即可。

如果需要,您可以通过编辑 php.ini 中的 post_max_size 选项来修改 post 请求的最大大小。这是我的样子:

; Maximum size of POST data that PHP will accept.
; Its value may be 0 to disable the limit. It is ignored if POST data reading
; is disabled through enable_post_data_reading.
; http://php.net/post-max-size
post_max_size = 8M

对于写入临时文件,php 内置了 I/O 流来处理。出于您的目的,您可能需要使用 php://memory 或 php://temp (有关这些的更多信息: http://www.php.net/manual/en/wrappers.php.php )

所以你可以做这样的事情:

示例 HTML:

<html>
<head>
<!-- include jquery because you say you are using it -->
<script src="//code.jquery.com/jquery-1.10.2.min.js"></script>

<script>
//just a dummy function to represent your js to extract csv data from a table
function extract_table_data(){
    var csv = "field1,field2,field3\n\
value1,value2,value3\n\
value4,value5,value5";
    return csv;
}

$( document ).ready(function() {
    //export link click handler
    $('#export_link').click(function() {
        $('#csv_data').val(extract_table_data());
        $('#theform').submit();
    });
});
</script>
</head>
<body>
<a id='export_link'>Export CSV</a>
<form id='theform' method='post' action='dropcsv.php'>
    <input type='hidden' name='csv_data' id='csv_data'/>
</form>
</body>
</html>

dropcsv.php

//filename for our csv attachment
$export_filename = 'thefile.csv';
//grab csv data
$csv_data = $_POST['csv_data'];
//open file in memory
$f = fopen('php://memory', 'w'); //use php://temp if you want a tmp file instead
//load up csv file
fwrite($f, $csv_data);
// go back to the beginning of the file
fseek($f, 0);
header('Content-Type: application/csv');
header('Content-Disposition: attachement; filename="'.$export_filename.'"');
fpassthru($f);
fclose($f);

当然不要忘记添加错误检查并清理输入。

关于javascript - 在 Javascript 中发布并重定向以进行文件下载,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20996750/

相关文章:

javascript - 如何使用 jquery 删除附加元素?

javascript - 用 javascript/jquery 替换选择输入

javascript - 为什么谷歌地图折线描边颜色总是黑色?

php - 使用OAuth验证应用程序以访问融合表

php - 是否可以使用 javascript 查找文件的最后修改时间?

php - SilverStripe 3.6.2 - 按下拉选择对分页数据对象进行排序会触发 404 错误

javascript - 为什么 0010 在 javascript 中等于 8?

javascript - 创建正确的导航路径

javascript - 正则表达式:类似 Slack 的 'markdown',用于精确匹配一个格式化字符

javascript - 将脚本插入现有函数?