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

Question

我在 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 等文件时，文件已下载但文件内容为空或不可读。

Answer 1

使用 download() 方法和正确的 headers 代替：

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),
]);

Answer 2

如果有人遇到类似问题，您可以按照以下步骤解决

Laravel/backend代码：

$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、图片）将不会显示任何内容。

希望这个回答能对大家有所帮助。

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

Download file from backend laravel using vue as frontend

javascript

download

laravel

laravel-filesystem