你好，我有一個 VUEJS 3 的前端和 Laravel 8 的後端。我會下載儲存在 public/pdf/temp/file.pdf 中的 pdf
現在我從 VUEJS 撥打電話：
axios.post('/api/'+ this.url_access +'/rebuild', formData, { headers: {
'Content-Type': 'multipart/form-data',
'responseType': 'blob'
}})
.then(response=>{
if(response.status == 200){
const url = window.URL.createObjectURL(new Blob([response.data]));
const link = document.createElement('a');
link.href = url;
link.setAttribute('download', 'test.pdf');
document.body.appendChild(link);
link.click();
}
})
.catch(error=>{
console.log(error);
})
在後端我有一個回傳pdf檔的函數：
try{
$headers = [
'Content-Type' => 'application/pdf',
];
return response()->download($file_path, $workspace['name'] . '_' .date("Ymd").'.pdf', $headers)->deleteFileAfterSend(true);
}catch(Exception $e){
return $e->getMessage();
}
但是我下載了空白內容的pdf。
有人對這個問題有任何想法嗎？
在 Laravel 中
$pdf = PDF::loadView('users.pdf', ['data' => $data]); return $pdf->output();在 Vue js 中
axios({ url: 'http://localhost:8000/api/your-route', method: 'GET', responseType: 'blob', }).then((response) => { var fileURL = window.URL.createObjectURL(new Blob([response.data], {type: 'application/pdf'})); var fileLink = document.createElement('a'); fileLink.href = fileURL; fileLink.setAttribute('download', 'file.pdf'); document.body.appendChild(fileLink); fileLink.click(); });回答
responseType 是 headers 的同級，而不是子級
axios.post('/api/'+ this.url_access +'/rebuild', formData, { headers: { 'Content-Type': 'multipart/form-data', }, 'responseType': 'blob' // responseType is a sibling of headers, not a child }) .then(response=>{ if(response.status == 200){ const url = window.URL.createObjectURL(new Blob([response.data])); const link = document.createElement('a'); link.href = url; link.setAttribute('download', 'test.pdf'); document.body.appendChild(link); link.click(); } }) .catch(error=>{ console.log(error); })感謝菲爾的幫忙。