在 React 中提供 PDF

Question

我目前在我的 localhost 上的端口 8080 上有一個前端 React 應用程序，在端口 9000 上有一個后端 Express 服務器（我認為這些必須是不同的端口，但我可能錯了）。 我的目標是在我的網頁上有鏈接，將 PDF（或其他文件，如 Excel 表）下載到用戶的本地計算機，但我不確定如何 go 關於此。

如果我在 Express 服務器端有 PDF，我想到了 2 個選項

1. 在 Express 中創建一個 static 文件夾，其中包含所有文件

const app = express();
app.use('/static', express.static(path.join(__dirname, 'MyPDFs')));

然后在我的 React 應用程序中使用用戶錨標記來指向我需要的文件

<a href="http://localhost:9000/static/myFile.pdf">Link to PDF </a>

2. 在 Express 中設置路由並發送響應下載

var express = require("express");
var router = express.Router();

/* GET home page. */
router.get("/static", function (req, res, next) {
  res.download("MyPDFs/myFile.pdf");
});

然后使用fetch或axios package 從 React 發出 Http 請求，就像我從這個鏈接

axios({
  url: 'http://localhost:9000/static',
  method: 'GET',
  responseType: 'blob',
}).then((response) => {
  const url = window.URL.createObjectURL(new Blob([response.data]));
  const link = document.createElement('a');
  link.href = url;
  link.setAttribute('download', 'file.pdf');
  document.body.appendChild(link);
  link.click();
});

但是這個解決方案似乎不是很干凈，因為我讀到瀏覽器本身不支持從請求中下載文件，我需要 3rd 方包來做到這一點。

另一個完整的選擇是將這些文件放在前端 React 應用程序的目錄中，但我不希望這樣做。 我更願意將這些 PDF（或 Excel 等其他文件）保留在服務器端，並以某種方式從 React 中檢索這些文件。 當用戶單擊鏈接時，我不一定需要下載這些文件（盡管那是可取的），但至少要讓它顯示在瀏覽器中。

這種情況的“最佳實踐/標准”方法是什么？ PDF 文件 go 在服務器端還是客戶端？ 我應該簡單地鏈接到另一個端口上的文件還是發送 Http 請求或其他什么？ 先感謝您。

Answer 1

https://blog.logrocket.com/programmatic-file-downloads-in-the-browser-9a5186298d5c/這可能對您有用。

HTML5 將下載屬性引入標簽。

雖然不是每個瀏覽器都支持它，但您會發現您可能永遠不會遇到使用過時瀏覽器的用戶（當然首先檢查兼容性）。

我的方法是將文件上傳到存儲提供商並使用類似於鏈接的方法從那里下載內容/CDN。 我會使用我的前端將文件發送到我的 API，確保在將其上傳到我的存儲機制之前對其進行驗證/驗證。

但是，這會帶來復雜性和成本，因此我不確定它是否適合您的應用程序。 我當然不能說它是否是標准。

這也不能真正回答你的問題，我會堅持你目前的方法，不要太擔心最好的方法，直到你目前的方法不夠好。

也只需安裝您的 static 文件夾，以便可以提供服務而不是處理路線。

https://expressjs.com/en/starter/static-files.html

重新閱讀您的問題后，您可以說這將是兩種方法的組合，從前端下載，而不將文件存儲在 React 中。

最后，您不需要進行 fetch 或 axios 請求，您只需要知道文件的位置，瀏覽器將通過 HTML5 標簽處理下載，省去了額外的網絡調用

TL;博士：

1. 將 Express 與靜態掛載的目錄一起使用
2. 從 React 上傳文件到 Express，放置在 static 目錄中
3. 使用 React 將位置鏈接到 Html 標簽中的下載屬性
4. 下載

當您處理規模時，我建議您選擇第 5 步：

5. 使用 Express 將內容上傳到可以使用 CDN 提供服務的 static 存儲機制。