通過Angular保存已創建的PDF或CSV文件（不導出）

Question

我有兩個端點

POST `reports/pdf`
{
payload
}

和：

POST `reports/csv`
{
payload
}

它以file:///C:/Users/UserFolder/AppData/Local/Temp/csv6677594787854925068.csv和file:///C:/Users/UserFolder/AppData/Local/Temp/pdf6677594753424925068.pdf返回臨時文件

我使用這種方法創建了服務來獲取該文件：

exportReport(summaryCustomerReport: SummaryCustomerReport): Observable<Object> {
const exportUrl = `${this.reportsUrl}/pdf`;


return this.http.post(exportUrl, summaryCustomerReport);
}
private get reportsUrl() {
return `${environment.backendUrl}/reports`;
}

然后，我嘗試使用該服務：

downloadPdf() {
this.hoursWorkedForCustomersService.exportReport(this.summaryCustomerReport, ExportFileFormat[ExportFileFormat.PDF]).subscribe(
  result => {
    saveAs(result, 'new.pdf');
   },
  error => { console.error(error) },
  () => {}
);}

但是我有一個錯誤

Access to XMLHttpRequest at 'file:///C:/Users/UserFolder/AppData/Local/Temp/csv6677594787854925068.csv' from origin 'http://localhost:4200' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.

並且：

ERROR DOMException: Failed to execute 'send' on 'XMLHttpRequest': Failed to load 'file:///C:/Users/UserFolder/AppData/Local/Temp/csv6677594787854925068.csv'.

我試圖使用類似問題的解決方案，例如使用chrome.exe --allow-file-access-from-files --disable-web-security CMD運行chrome，但沒有幫助。

有什么想法我做錯了嗎？

Answer 1

你可以做兩件事

1. 將文件放入應用的根目錄，然后可以通過http：//：// localhost：4200 / csv6677594787854925068.csv來訪問它，而不是file：/// C：/Users/UserFolder/AppData/Local/Temp/csv6677594787854925025068.csv

要么

2. 將響應頭中的新文件設置為“ Access-Control-Allow-Origin：*”。