如何使用javascript下载从API接收的内联pdf？答案

【问题标题】：How to download an inline pdf received from API using javascript?如何使用javascript下载从API接收的内联pdf？
【发布时间】：2022-08-22 18:04:33
【问题描述】：

我有一个后端可以处理带有 pdf 的各种操作，其中之一 - 将多个 pdf 合并为一个。

场景如下：

用户在一个虚拟列表中排列多个 pdf，并为该列表提供一个姓名。
用户单击“下载列表”按钮。
通过 API 调用后端 (Laravel) 以合并所需的 pdf 并返回一个文件响应。 return response()->file(realpath($pathToFile), [\'Content-Disposition\' => \'inline; filename=\"\'.$file,\'Content-Type\' => \'application/pdf\']);

我需要做的是在新窗口中打开这个收到的文件作为内联 pdf 预览，但我必须将它命名（我尝试过使用 blob，但没有提供标题的选项），以便当用户点击pdf查看器的“下载”按钮，他们得到一个命名下载，它由列表标题命名。听起来像是一项非常基本的任务，但我找不到任何合适的解决方案来实现这一目标。为文件提供 url 而不是文件响应也不是一种选择，因为用户只被允许下载他们的列表，他们不应该能够直接通过 url 检索这些文件。

@KJ 感谢您提供有关此主题的信息。我设法通过两层 pdf 访问路径解决了我的问题。我的意思是首先它调用一个路由来检查用户是否有权访问特定文件（auth 令牌由 axios 传递）如果他们确实有权访问，我发出一个单一使用令牌，然后立即用于重定向到另一个检查令牌的路由获取文件并通过销毁令牌使令牌过期。

标签： javascript laravel download pdf-generation

【解决方案1】：

我设法通过绕行解决了我的问题，这可能不是最优化的解决方案，而且感觉有点 hack-ish，但这是唯一对我有用的解决方案。

我在我的 API 后端创建了两条路由：

第一条路线

Route::post('/download-file', 'PdfProcessController@downloadFileApi'); 接受文件id 作为参数。 downloadFileApi 方法检查用户是否有权访问所需文件，如果有，则使用Sanctum 发出令牌，$token = Auth::user()->createToken('access_file_token'); 最后，此方法返回 url，这是使用生成的令牌对第二个 API 路由的调用return sprintf('%s/api/download-file/%s?_token=%s', env('APP_URL'), $request->input('id'), $token->plainTextToken);

第二条路线Route::get('/download-file/{hash}', 'PdfProcessController@downloadFile')->middleware(['token.to.header', 'auth:sanctum']); token.to.header 中间件是基于这个答案实现的 Autheticate via Laravel Sanctum by passing token as a GET query parameter 内部downloadFile 令牌被销毁（因为它已被使用）并返回内联pdf。

在我的前端我做

this.$axios.post('/api/download-file', {id: fileid})
.then(response => {
  window.open(response.data, '_blank');
})

【讨论】：