PDF.js：使用 postMessage 將 base64 傳遞給 iframe 中的 viewer.html

Question

我正在嘗試創建一個迷你應用程序（在 Salesforce 中，盡管這可能不那么相關），它將來自 PDF.js 的開箱即用的viewer.html嵌入到 iframe 中。 用戶從列表中選擇一個 PDF，應用程序檢索該 PDF 的 base64 並將其傳遞給查看器。

有工作的例子，在那里，使用的過時的版本預建PDF.js ，包括這一個是使用版本1.5.188 。 這些工作示例似乎在做的是：

• 將查看器嵌入iframe 並使用postMessage將 base64 傳遞給查看器
• 在viewer.html ，添加了以下腳本來接收和處理消息事件：

<script>
  if (window.addEventListener) {
      // For standards-compliant web browsers
      window.addEventListener("message", handleMessage, false);
  } else {
      window.attachEvent("onmessage", handleMessage);
  }

  function handleMessage(evt){
    console.log('viewer.html entering handleMessage');
    var raw = atob(evt.data);
    var uint8Array = new Uint8Array(raw.length);
    for (var i = 0; i < raw.length; i++) {
      uint8Array[i] = raw.charCodeAt(i);
    }
    PDFViewerApplication.open(uint8Array);
  }
</script>

這在過時的版本上運行良好，但是當我在最新版本（撰寫本文時為viewer.html中將上述腳本添加到viewer.html時，沒有任何反應。 PDFViewerApplication仍然存在於viewer.js ，並且仍然有一個open函數，它將文件作為它的第一個參數。 但是當我調用這個函數時，它不顯示我的 PDF。

我知道您可以使用 URL 中的file參數讓查看器根據其路徑顯示文件。 但是我從服務器端 REST API 調用中檢索這些文件，所以我沒有路徑，只有一個 base64。 有沒有辦法讓最新版本的查看器接收和顯示 base64？

Answer 1

結果證明這是瀏覽器緩存問題。 清除緩存為我提供了最新的 PDF.js 庫版本，並且我能夠在查看器中查看 PDF。