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

【问题标题】：How to download zip file from PHP Laravel API using Angular in front end?如何在前端使用 Angular 从 PHP Laravel API 下载 zip 文件？
【发布时间】：2018-09-05 09:34:46
【问题描述】：

我想使用 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 传递？

【问题讨论】：

$http.post('localhost:8000/dashboard/backup', {}, {responseType:'arraybuffer'})
stackoverflow.com/questions/20904151/… 我认为它是重复的
@MaihanNijat 嗨，你能评价我的答案吗，我添加了它。

标签： php angular laravel laravel-5

【解决方案1】：

@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用于保存文件。

【讨论】：

【解决方案2】：

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

【讨论】：

【解决方案3】：

使用 post 方法和 responseType 数组缓冲区

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

【讨论】：