Angular请求Laravel导出Excel时出现Http解析失败错误

你碰到的这个问题我之前也帮人排查过——明明后端返回了200 OK，Angular却抛出了解析失败的错误，核心原因其实很简单：Angular的HttpClient默认会把所有响应体当作JSON来解析，但你后端返回的是Excel二进制文件，这就导致JSON解析器读到文件开头的PK（xlsx本质是Zip压缩包，开头标识就是PK）时直接报错。

先确认下你的代码场景：

Laravel后端路由代码 #

Route::get('excel', function () { 
    return Excel::download(new PqrsExport, 'products.xlsx'); 
});

Angular订阅请求代码 #

get_excel(){ 
    this.pqrService.getExcel().subscribe( 
        resp => console.log(resp), 
        err => console.log(err) 
    ); 
}

收到的错误信息 #

HttpErrorResponse {headers: HttpHeaders, status: 200, statusText: "OK", url: "http://localhost:8000/excel", ok: false, …}
headers: HttpHeaders {normalizedNames: Map(0), lazyUpdate: null, lazyInit: ƒ}
status: 200
statusText: "OK"
url: "http://localhost:8000/excel"
ok: false
name: "HttpErrorResponse"
message: "Http failure during parsing for http://localhost:8000/excel"
error: {error: SyntaxError: Unexpected token P in JSON at position 0 at JSON.parse () at XMLHtt…, text: "PKVGSPG�D�X�[Content_Types].xml�…heets/_rels/sheet1.xml.relsPK ��"}

解决方案 #

只需要两步就能搞定：

1. 修改Angular服务的请求配置，指定响应类型为Blob

在你的pqrService的getExcel方法里，必须添加responseType: 'blob'配置，告诉HttpClient不要把响应解析成JSON，而是返回原始的二进制Blob对象：

// pqrService中的getExcel方法
getExcel(): Observable<Blob> {
  return this.http.get('http://localhost:8000/excel', {
    responseType: 'blob' // 这是关键配置
  });
}

2. 在订阅时处理Blob，触发浏览器下载

拿到Blob对象后，我们需要手动创建下载链接，让浏览器识别并下载这个Excel文件：

get_excel(){ 
    this.pqrService.getExcel().subscribe( 
        (resp: Blob) => {
            // 创建Blob的临时URL
            const fileUrl = window.URL.createObjectURL(resp);
            // 创建隐藏的a标签
            const downloadLink = document.createElement('a');
            downloadLink.href = fileUrl;
            // 设置下载文件名，和后端导出的文件名一致
            downloadLink.download = 'products.xlsx';
            // 触发点击下载
            downloadLink.click();
            // 释放临时URL，避免内存泄漏
            window.URL.revokeObjectURL(fileUrl);
        }, 
        err => console.error('下载失败:', err) 
    ); 
}

进阶优化：从响应头自动提取文件名 #

如果后端返回的响应头里包含Content-Disposition（Laravel的Excel::download默认会返回这个头），你可以不用硬编码文件名，而是从响应头里自动提取，这样更灵活：

首先修改服务的请求配置，让它返回完整的响应对象：

// pqrService中的getExcel方法
getExcel(): Observable<HttpResponse<Blob>> {
  return this.http.get('http://localhost:8000/excel', {
    responseType: 'blob',
    observe: 'response' // 让请求返回完整的HttpResponse，包含响应头
  });
}

然后在订阅时解析响应头获取文件名：

get_excel(){ 
    this.pqrService.getExcel().subscribe( 
        (resp: HttpResponse<Blob>) => {
            // 从响应头中提取文件名
            const contentDisposition = resp.headers.get('Content-Disposition');
            let filename = 'products.xlsx'; // 默认文件名
            if (contentDisposition) {
                const filenameMatch = contentDisposition.match(/filename="?([^"]+)"?/);
                if (filenameMatch && filenameMatch[1]) {
                    filename = filenameMatch[1];
                }
            }

            // 后续下载逻辑和之前一致
            const fileUrl = window.URL.createObjectURL(resp.body!);
            const downloadLink = document.createElement('a');
            downloadLink.href = fileUrl;
            downloadLink.download = filename;
            downloadLink.click();
            window.URL.revokeObjectURL(fileUrl);
        }, 
        err => console.error('下载失败:', err) 
    ); 
}

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