AngularJS1中用$resource PUT接口下载PDF遇[object object]弹窗求助

嘿，我明白你现在遇到的麻烦了——用$resource调用API下载PDF，结果弹出的窗口显示[object object]，还不能用$http对吧？别担心，这是因为默认的$resource配置会把响应当成JSON解析，而PDF是二进制数据，咱们调整一下配置就能搞定！

问题根源 #

你的原始$resource配置有两个关键问题：

• 响应类型没指定为二进制（blob），导致$resource自动把PDF数据当成JSON解析，最后得到的就是个无法识别的对象
• headers和transformRequest的位置放错了，它们应该属于具体的请求动作（比如GET），而不是$resource的全局配置参数

修正后的服务配置 #

先把你的GetInvoice服务改成这样：

function GetInvoice($resource) {
  return $resource('app/rest/invoice/:id', null, {
    'getInvoice': { // 可以自定义方法名，也可以用默认的'get'
      method: 'GET',
      headers: {'Accept': 'application/pdf'}, // 告诉服务器我们要PDF格式的响应
      responseType: 'blob', // 核心：指定响应是二进制blob类型
      transformResponse: function(data) {
        // 直接返回blob对象，跳过默认的JSON解析
        return { pdfBlob: data };
      }
    },
    'update': { method:'PUT'}
  });
}

控制器中调用并处理下载 #

接下来在你的控制器里这样调用服务，生成下载链接：

// 假设你有发票ID变量invoiceId
GetInvoice.getInvoice({id: invoiceId}, function(response) {
  // 从响应中取出blob
  const pdfBlob = response.pdfBlob;
  // 创建临时URL指向blob
  const downloadUrl = window.URL.createObjectURL(pdfBlob);
  // 创建隐藏的a标签触发下载
  const link = document.createElement('a');
  link.href = downloadUrl;
  link.download = `invoice-${invoiceId}.pdf`; // 设置下载的文件名
  document.body.appendChild(link);
  link.click();
  // 清理临时资源
  window.URL.revokeObjectURL(downloadUrl);
  document.body.removeChild(link);
}, function(error) {
  // 处理下载失败的情况
  console.error('PDF下载出错:', error);
});

关键说明 #

• responseType: 'blob'：强制Angular把响应当成二进制blob处理，而不是默认的JSON
• transformResponse：跳过$resource默认的JSON解析逻辑，直接把原始的blob数据返回给调用者
• 使用Accept头：告诉服务器我们期望接收PDF格式的响应，比设置Content-Type更合适（因为GET请求不需要发送请求体）

这样调整后，你就能正常下载PDF文件，不会再出现[object object]的问题啦！

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