如何使用 laravel 和 vuejs 下载文件

Posted 2023-02-22

【中文标题】如何使用 laravel 和 vuejs 下载文件

【英文标题】：how to download file using laravel and vuejs

【发布时间】：2020-06-12 18:28:19

【问题描述】：

我在 laravel 中创建了一个 .xlsx 文件，然后像这样将它发送到 vuejs

function excel (Request $request)
  $dlink = public_path('storage/reports/comunicacion_piciz.xlsx');
  $writer = new Xlsx($spreadsheet);
  $writer->save($dlink);
  $headers = ["Content-Type" => "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"];
  return response()->download($dlink,'comunicacion_piciz.xlsx', $headers);

当我在 vuejs 中调用这个方法时使用这个代码

sendFile () 
  request.post(`api/log/excel`, array: this.excelData, title: this.log)
  .then(res => 
    var newBlob = new Blob([res.data], 
    type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet')
    console.log(res.data)
    if (window.navigator && window.navigator.msSaveOrOpenBlob) 
      window.navigator.msSaveOrOpenBlob(newBlob)
      return
    
    const data = window.URL.createObjectURL(newBlob)
    var link = document.createElement('a')
    link.href = data
    link.download = 'comunicacion_piciz.xlsx'
    link.click()
    setTimeout(function () 
      window.URL.revokeObjectURL(data)
    , 100) 
    this.$spinner.close()
    )
    .finally(() => 
      this.$spinner.close()
    )
  

文件是在服务器中创建的并且工作正常，但是目前我发送到 vue 并下载它已损坏 附加信息 当我使用 writer save 时也试过这句话

header('Content-Type: application/vnd.openxmlformats-officedocument.spreadsheetml.sheet');
header('Content-Disposition: attachment;filename="Reporte Excel"');
header('Cache-Control: max-age=0');
$writer = new Xlsx($spreadsheet);
$writer->save('php://output');
exit;

也损坏了，我想我在 vue 部分遗漏了一些东西，但不确定

【参考方案1】：

这是一个简单的解决方案：

更改存储文件的方法，而不是发送和返回名称

创建其他方法或新控制器来下载文件

this.loading = true
axios.post(your_url_to_create_xlsx_and_store,data).then(resp => 
   this.loading = false;
   window.open(your_url_to_download_your_file?file="+resp.data.filename,"_blank")
)