如何在前端使用Angular从PHP Laravel API下载zip文件？

Question

我想使用PHP Laravel从服务器下载zip文件。 Laravel通过以下返回命令传递zip文件：

return response()->download($file);

当我在浏览器中点击控制器的路由URL时，它会下载zip文件；当我在Angular中使用window.open(url)时，它也会下载该zip文件，但它并不安全，因为任何人都可以下载该文件。 用户必须在下载文件之前进行身份验证，但是我无法通过window.open(url)传递标头，因此我需要采用其他方法来实现此目的。

我在这里经历了大多数问题，他们建议使用FileSaver和Blob 。 我尝试使用这些文件进行测试，但是没有用，这是因为API不会将zip文件传递给客户端。

这是Angular http.get：

return http.get('localhost:8000/dashboard/backup')
  .subscribe(res => {
    console.log('Successfull');
  }, err => {
    console.log(err);
  });

我可以获取文件路径，但是该路径不是公共路径，因此无法使用Angular下载它。 该路径返回为Application / XAMP ....，当我将其设置为HREF并单击它时，它将在浏览器中加载为localhost：4200 / Application / XAMP....。

在控制台日志中，我在JSON文件的第1行有一个无效字符。为什么将zip文件作为JSON传递？

Answer 1

使用post方法和responseType arraybuffer

$http.post('localhost:8000/dashboard/backup', {}, {responseType:'arraybuffer'}){
}

Answer 2

@Sameera建议有效。 我加responseType ，改变get来post 。

这是完整的解决方案：

return http.post('localhost:8000/dashboard/backup', {}, {responseType:'arraybuffer'})()
  .subscribe(res => {
    const blob = new Blob([res], {type: 'application/octet-stream'});
    FileSaver.saveAs(blob, 'backup.zip');
  }, err => {
    console.log(err);
});

FileSaver用于保存文件。

Answer 3

无论您做什么，这都是正确的。 这是我们使用angular和laravel下载zip的唯一方法。 但是您如何管理安全性目的是将您的路由放入投影的中间件中。 这样就不会下载未经授权的人。