使用 vue.js 从 laravel 不支持下载的文件

Question

我的函数可以使用 laravel 和 vue.js 下载我想要的确切文件，但是当我尝试打开下载的文件时，它显示unsupported file type 。

我的 vue.js 函数来获取文件信息：

downloadFile(file){
  this.$axios.post(`file/download`, file).then(({data}) => {
    this.download(data, file)
  })
},

我的 Laravel 控制器：

$file = public_path() . "/images/" . $request['file_name'];
$headers = ['Content-Type' => 'application/jpeg'];
return response()->download($file, $request['file_name'], $headers);

最后，我的 vue.js 函数用于下载创建 URL 链接的图像：

download(data, file) {
    const url = window.URL.createObjectURL(new Blob([data]));
    const link = document.createElement('a');
    link.href = url;
    link.setAttribute('download', file.file_name);
    document.body.appendChild(link);

    link.click();
}

Answer 1

因为后端已经返回“下载”数据您不应该在前端获取它然后在新选项卡中打开它。 您可以在新选项卡中打开它而无需获取

downloadFile(fileName){
 this.download(fileName)
},

download(file_name) {
    const link = document.createElement('a');
    link.href = `yoururl/${file_name}`;
    link.setAttribute('download', file_name);
    document.body.appendChild(link);
    link.click();
}

同样在后端部分，您应该使用“get”路由这样的方法

public function download($filename) {
  $file = public_path() . "/images/" . $filename;
  $headers = ['Content-Type' => 'application/jpeg'];
  return response()->download($file, $filename, $headers);
}