导出AngularJS表格为CSV时跳转至about:blank页面问题求助

嘿，我之前也碰到过一模一样的问题！直接用location.href触发data URI下载时，不少浏览器会因为安全限制或者数据长度问题，跳转到空白页而不是直接触发下载，咱们换个更靠谱的方式来搞定：

问题根源 #

你当前用location.href = exportHref的方式，当exportHref是较长的CSV data URI时，浏览器不会识别为下载操作，反而会打开新空白页来展示这个数据内容，这就是你看到about:blank的原因。

修复方案 #

改用创建隐藏<a>标签并模拟点击的方式，这种方式能让浏览器直接触发文件下载，完全不会跳转页面。修改你的导出函数如下：

$scope.exportToExcel = function (tableId) { 
  // ex: '#my-table' 
  var exportHref = Excel.tableToExcel(tableId, 'WireWorkbenchDataExport'); 
  
  // 创建一个隐藏的<a>标签
  const downloadLink = document.createElement('a');
  downloadLink.href = exportHref;
  // 从按钮的filename属性获取下载文件名，没有的话用默认名
  const filename = angular.element(document.querySelector(`[ng-click="exportToExcel('${tableId}')"]`)).attr('filename') || 'exported-data.csv';
  downloadLink.download = filename;
  // 隐藏标签避免影响页面布局
  downloadLink.style.display = 'none';
  
  // 添加到页面并模拟点击触发下载
  document.body.appendChild(downloadLink);
  downloadLink.click();
  // 点击完成后移除临时标签
  document.body.removeChild(downloadLink);
};

额外优化建议 #

1. 删掉不必要的$timeout：现在的实现方式不需要延迟触发，直接执行即可，所以可以把原来的$timeout代码块去掉。
2. 检查CSV编码：确认Excel.tableToExcel生成的exportHref是data:text/csv;charset=utf-8,...开头的UTF-8编码格式，避免出现中文乱码问题。
3. 补全按钮代码：你的按钮代码没写完，这里给你补全一个可用的示例：

<button style="float: right;" class="btn btn-link" ng-click="exportToExcel('#codeProjectsTable')" filename="test.csv">
  <span class="glyphicon glyphicon-download"></span> 导出CSV
</button>

这样修改后，点击按钮就能直接触发CSV文件下载，再也不会跳转到空白页啦！

内容的提问来源于stack exchange，提问作者Orph Descending