顯示文件.pdf 作為 Blob

Question

我正在研究顯示 PDF 的不同方式，以便在工作中的項目上做得更好。 我能夠將 url 插入到 PDF 到 iframe 元素中，它可以很好地顯示 ZBCD1B68617759B8D1ZFF0。 有時我們有一個用例，其中前端接收 pdf 作為應用程序/pdf，而不是 json2668CFDE63131ACBD4B 中的 url。

為此，我將應用程序/pdf 轉換為 blob，並為該 blob 創建一個 url。 這對除 Android 之外的所有內容都非常有效，因此我正在使用 iFrame 測試一些方法。

I would like to take this sample pdf http://www.pdf995.com/samples/pdf.pdf , turn it into a blob, and insert the blob url in the src of an iframe element for the purposes of testing blobs as iframe Android Chrome 瀏覽器上的資源。

function App() {
  const samplePdf = "http://www.pdf995.com/samples/pdf.pdf"

  const blob = new Blob([samplePdf], { type: 'application/pdf' });

  const url = URL.createObjectURL(blob)

  return (
    <>
      <h1>iFrame Rendering of PDF Blob</h1>
      <iframe title="pdf" src={url} style={{ height: '1250px', width: '100%' }}></iframe>
    </>
  );
}

export default App;

這是 React 應用程序中呈現的內容

為了顯示 pdf 的內容，我缺少什么？ React 不是必需的，它似乎是一種開始快速練習項目的簡單方法。

Answer 1

您需要數據來構建 blob，而 URL 只指向您需要的數據。 讓我們 go 並得到它：

const getLocalPdfUrl = async () => {
  const url = 'http://www.pdf995.com/samples/pdf.pdf';

  const response = await fetch(url);
  const blob = await response.blob();

  return URL.createObjectURL(blob);
};

這個 function 返回一個Promise ，它將（希望）與 URL 一起解決，您可以使用它來構造 URL。 它是async的，所以不要忘記等待 promise 解決。

測試說明
從前端獲取外部資源受到 CORS 的限制，因此 pdf995.com 的鏈接將不起作用。 找到一個允許從 FE 獲取自身的虛擬 PDF 文檔也不是一項簡單的任務。

為了測試它是否有效，我建議將 PDF 文件放在/public文件夾（或類似文件夾）中，並在與應用程序相同的 locslhost 上提供它。