javascript - 调用从 Angular 6 下载 pdf 的 Spring boot api 给出错误无法解析响应
问题描述
我有一个创建 pdf 报告并下载它的 spring boot API,如果我直接在浏览器中调用 API,则会直接创建和下载 pdf,但是当我从 Angular 6 调用该 GET API 时,我收到以下错误:
春季启动(java)代码:
@RequestMapping(value = "/app_report/en", method = RequestMethod.GET)
@ResponseBody
public void getEnRpt(HttpServletResponse response, @RequestParam("appNum") String appNum) throws JRException, IOException, SQLException {
JasperReport jasperReport = JasperCompileManager.compileReport("./src/main/resources/jasperReports/App_created_en.jrxml");
Connection connection = dataSource.getConnection();
Map<String, Object> params = new HashMap<>();
params.put("P_APP_NO", appNum);
JasperPrint jasperPrint = JasperFillManager.fillReport(jasperReport, params, connection);
response.setContentType("application/x-pdf");
response.setHeader("Content-disposition", "inline; filename=App_report_en.pdf");
final OutputStream outStream = response.getOutputStream();
JasperExportManager.exportReportToPdfStream(jasperPrint, outStream);
}
调用 API 的 Angular 代码:(我尝试了多种方法,这里显示了两种):
this.http.get(this.api_url + reportUrl, {
responseType: 'blob'
}, ).subscribe((response: File) => {
console.log('report is downloaded');
});
this.http.get(this.api_url + reportUrl).subscribe(
(response) => {
console.log('report is downloaded');
});
我在 Angular 调用 API 后得到的控制台错误:
error:
SyntaxError: Unexpected token % in JSON at position 0 at JSON.parse (<anonymous>) at XMLHttpRequest.onLoad
message: "Http failure during parsing for https://localhost:7001/reports/app_report/en?appNum=xxxxxxx"
name: "HttpErrorResponse"
ok: false
status: 200
statusText: "OK"
url: "https://localhost:7001/reports/app_report/en?appNum=xxxxxx"
我只需要像在浏览器中发生的调用一样调用 API,以便立即下载 pdf
响应头如下:
Content-disposition
inline; filename=App_report_en.pdf
Content-Type
application/x-pdf
如果我调用该 API,为什么 Angular 不像浏览器中那样下载文件?(尤其是请求成功后)
解决方案
为避免 JSON 解析问题,您需要使用responseType: 'blob'
in requests 选项告诉 http 客户端响应将是一个 blob。
然后,要让导航器真正打开文件,您可以按照此博客中的说明进行操作
const fileName = "report.pdf";
this.http.get(this.api_url + reportUrl, { responseType: 'blob'})
.subscribe((blob: Blob) => {
console.log('report is downloaded');
if (navigator.msSaveBlob)
{
// IE 10+
navigator.msSaveBlob(blob, filename);
}
else
{
let link = document.createElement("a");
if (link.download !== undefined)
{
let url = URL.createObjectURL(blob);
link.setAttribute("href", url);
link.setAttribute("download", fileName);
link.style.visibility = 'hidden';
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
}
else
{
//html5 download not supported
}
}
});
这应该适用于 IE 10+ 和其他现代浏览器,除了 iOs(参见CanIuse)
推荐阅读
- python - 如果参数很长,Python Post 请求会失败并显示 400/ConnectionResetError(10054)
- marklogic - 如何通过 Azure AD 对 Marklogic 管理界面 (8001) 进行身份验证
- ruby - 系统版本太旧时如何安装 Homebrew Portable Ruby
- html - 表格边框在右侧越界
- latex - 重复标题和日期 R Markdown PDF
- python - 双 for 循环从多个 url 中提取数据
- php - 如何隐藏价格高于1的产品
- laravel - Laravel 如何将值更新到另一个表中的另一列?
- xamarin - Xamarin Forms Android Iframe 导航事件未触发
- python - 如何在“if”语句中调用函数?