小弟，目前遇到一個問題是關於 createObjectURL
blob:http://localhost:4200/xxxxx-xxx-xxxxx
希望各位前輩大神！！能夠指點一下小弟 ~~
已邀請的邦友 {{ invite_list.length }}/5
希望是你要的，下載檔案時用 JS 產生一個 a 連結，然後 download 屬性的值就是檔名，可以自行設定
axios.post(api路徑, {...}, { responseType: 'blob' })
.then(({ data }) => {
const url = window.URL.createObjectURL(new Blob([data]));
const link = document.createElement('a');
link.href = url;
const fileName = `自定義檔名`;
link.setAttribute('download', fileName);
document.body.appendChild(link);
link.click();
link.remove();
});
抱歉表達不清楚，我想要在瀏覽的情況下，下載時自動帶入檔案名稱
目前代碼如下：
this._report.getReportFile(params, this.apiUrl).pipe(
catchError(err => {
this.loadingVisible = false
console.log(err);
return err
})
).subscribe((response) => {
const url = window.URL.createObjectURL(response);
window.open(url, '_blank');
window.URL.revokeObjectURL(url);
this.loadingVisible = false
})
抱歉表達不清楚，我想要在預覽 ( 下方網址 ) 的情況下下載，但是想要能夠自動帶入檔案名稱
blob:https://192.168.1.111/333b3e1c-fe04-40e4-b8c8-f0050c4b9e9c
this._report.getReportFile(params, this.apiUrl).pipe(
catchError(err => {
this.loadingVisible = false
console.log(err);
return err
})
).subscribe((response) => {
const url = window.URL.createObjectURL(response);
window.open(url, '_blank');
window.URL.revokeObjectURL(url);
this.loadingVisible = false
})
首先，看到是192.168開頭，我就知道那個網址我連不進去，實際點進去也是如此。
其次，我應該沒有理解錯誤，你要的功能是像這樣沒錯吧?想要直接用瀏覽器開檔案。
我好奇的就是為什麼要做這麼複雜的功能，直接讓使用者下載成檔案就好，讓他用瀏覽器直接看的必要性在哪裡?
一樣都是讓使用者看資料，提供他良好的表單查詢介面以及檔案下載，我想已經達到絕大多數的需求了，沒有必要特別讓瀏覽器增加這麼大的負擔。
還有，你有沒有仔細看別人給你的程式碼，明明我都命名好叫做filename了
download(path : string, filename : string, payload : object, mimetype : object){
let option = { responseType: "blob" as "json" };
this.http.post(this.rootURL + "/" + path, payload, option)
.pipe(catchError(this.handleError))
.subscribe((res:any) => {
let blob: Blob = new Blob([res], mimetype);
let downloadUrl = window.URL.createObjectURL(blob);
let link = document.createElement("a");
link.href = downloadUrl;
link.download = filename;
link.click();
})
}
呃...抱歉表達不清楚 ~~
首先網址只是示意一下讓我儘量的表達清楚而已 XD
再來因為目前需求是讓使用者可以先查看到 PDF 的內容，當然會有查詢的介面讓使用者可以按照條件查詢，查詢後確認內容正確後再下載至電腦，以免下載出一堆錯誤條件出來的檔案 ( 當然我明白是使用者的條件下錯跟我沒關係 XD 但還是希望可以有好的體驗 ~~
最後，我知道檔案名稱的命名您的代碼有寫了，但是這樣就只是普通的下載啦，我想要的是預覽 + 下載檔案名稱的效果...或者您有比較好的改善方式？
這樣說明應該有比較清楚， 感謝您的回覆 ~~
都已經開到另一個畫面了，這應該已經超出你前端可以辦到的事情了。
瀏覽器另開PDF畫面，裡面的Blob資料你前端是沒有能力去做控制的，你能做的只是這些資料你要怎樣處理，開在分頁的PDF不可能還有辦法透過前端去做調整。
這部分請交給後端試試看，請他們資料給你時就讓該資料命名好檔案名稱，這樣在瀏覽頁面下載才能動態化檔案名稱。
iThome鐵人賽
看影片追技術