Question

我在IE11中遇到了一个奇怪的问题。我正在使用服务器端处理运行DataTables，因此我必须创建一个自定义按钮来导出完整数据集，因为默认按钮只导出可见数据集。

这是我的一个按钮的Laravel配置的Yajra DataTables：

'buttons' => [
  ['extend' => 'csv',
   'text' => '<i class="fa fa-file-excel-o"></i> CSV',
   'action' => 'function(e,dt,node,config){
      var data=$.extend(
        true,
        dt.context[0].oSavedState,
        {
          columns:dt.context[0].aoColumns.map(function(col){
            return {"data":col.data}
          })
        })
      window.location.href = window.location.href + 
        "?action=csv&" + 
        $.param(data);
    }'
  ],
  ...

该按钮工作正常，它基本上编译了列和过滤器的列表，并将用户发送到处理action=csv请求的Laravel路由，并生成在Chrome和Firefox中自动触发的Excel下载。

但是，在IE11中，浏览器会重定向到Excel下载路由，但会引发“无法访问此页面”错误消息。我可以在地址栏中看到URL是正确的，奇怪的是，如果我只是在浏览器中点击刷新，则会触发CSV下载，并且我可以选择保存。

每次单击下载链接时都会发生这种情况。 什么可能导致IE11认为无法访问该页面，何时可以？

我尝试查看网络工具中的请求/响应标头，一切似乎都很好。有什么想法吗？

另外，我尝试重写我的window.location逻辑来创建一个超链接元素，将它附加到DOM，触发点击，它仍然会产生相同的东西。

更多信息

我尝试了其他一些东西，并能够在代码中的任何一点弹出下载过程，直到最终响应浏览器。浏览器以200状态代码响应，当我查看网络选项卡并查看响应正文时，我可以在那里看到我的CSV内容，其中包含适当的内容处理，内容长度标题。 Content-Type标题是text / plain，但将其更改为text / csv并没有解决问题。

如果IE的网络选项卡正确呈现所有内容，为什么IE的浏览器渲染器会显示页面无法显示错误？

Answer 1

好吧，我终于能够解决IE / Edge导出问题，并且可以归结为查询字符串的长度。

DataTables网格发出GET请求，其中包含与查询相关的一堆属性（可见的列，应用了哪些过滤器等）。

样本请求参数：

{
  "action": "csv",
  "time": "1529689896632",
  "start": "0",
  "length": "10",
  "order": [
    ["2","asc"],
    ["1","asc"]
  ],
  "search": {
    "search": "",
    "smart": "true",
    "regex": "false",
    "caseInsensitive": "true"
  },
  "columns": [
    {
      "visible": "true",
      "search": {
        "search": "",
        "smart": "true",
        "regex": "false",
        "caseInsensitive": "false"
      },
      "data": "programs"
    },
    // ...

由于列太多，这些请求参数会创建一个非常长的查询字符串（在3-4000个字符的范围内）。 IE和Edge似乎可以处理一定长度的查询字符串，因为我注意到查询字符串数据被截断时会出现一些错误。

我最终通过省略导出所需的不必要的默认属性值来减少了查询字符串的长度。现在，IE和Edge都立即响应文件下载，而不是抛出未找到页面或其他异常错误。

IE11无法访问此页面，但页面有效且可访问

1 个答案: