axios 使用vue作为前端从后端laravel下载文件

irlmq6kh  于 2022-12-12  发布在  iOS
关注(0)|答案(2)|浏览(245)

我在Laravel中创建了一个控制器,它包含以下代码

$doc = Document::find($id);
if (Storage::disk('local')->exists($doc->path)) {
      return Storage::disk('local')->get($doc->path);
}

在我的前端,我使用javascript以编程方式下载以下代码的文件(是否可以使用blob或有任何其他方法来做到这一点?)

async downloadDocument() {   
  DocService.downloadDoc(this.document.id).then((response) => {  // Service that handles ajax call
    const url = window.URL.createObjectURL(new Blob([response.data]));
    const link = document.createElement("a");
    link.href = url;
    link.setAttribute("download", this.document.name);
    document.body.appendChild(link);
    link.click();
    link.remove();
  });
},

我可以下载并查看txt,php文件的内容,但当我尝试下载图像,pdf等文件下载,但文件的内容是空的或不可读。

flvtvl50

flvtvl501#

如果有人遇到类似的问题,你可以做以下来解决它
Laravel/后端代码:

$path = storage_path() . '/app/' . $doc->path;
            return response()->download($path);

定义文件的路径并使用download()响应它
前端代码:

async downloadDocument() {
      axios({
        url: "/api/documents/" + this.document.id,
        method: "GET",
        responseType: "blob", // important
      }).then((response) => {
        // Service that handles ajax call
        const url = window.URL.createObjectURL(new Blob([response.data]));
        const link = document.createElement("a");
        link.href = url;
        link.setAttribute("download", this.document.name);
        document.body.appendChild(link);
        link.click();
        link.remove();
      });
    },
  },

请记住responseType很重要,否则您下载的文件(pdf,图像)将不会显示任何内容。
希望这个答案能对某人有所帮助。

chhqkbe1

chhqkbe12#

请改用带有正确标头的download()方法:

return Storage::download($doc->path, basename($doc->path), [
    'Content-Description' => 'File Transfer',
    'Content-Type' => mime_content_type($doc->path),
]);

如果要将文件作为原始文本发送到客户端并让客户端决定如何处理该文件:

return response(Storage::disk('local')->get($doc->path))->withHeaders([
    'Content-Description' => 'File Transfer',
    'Content-Type' => mime_content_type($doc->path),
]);

相关问题