使用 javascript 打開 base64 編碼的 pdf 文件。 文件大小大於 2 MB 的問題

Question

我正在使用以下代碼使用 javascript 打開 base64 編碼的 pdf 文件。 它適用於小於 1MB 的小型 pdf 文件。 但如果文件大小大於 2MB，它就不起作用。 如果您有類似情況的工作代碼，請告訴我。

var base64 = "base64 content";
let pdfWindow = window.open("");
pdfWindow.document.write("<iframe width='100%' height='100%' src='data:application/pdf;base64, " + base64 + "'></iframe>");

Answer 1

Chrome 的 pdf 閱讀器插件和 Mozilla 的 pdf.js（由 Firefox 使用）對於由數據加載的文檔的 Z437175BA4191210EE004E1D937494D09 的大小似乎確實存在限制

請注意，除了這些插件/腳本（pdf.js 甚至只是使選項卡崩潰）之外，此限制不受任何其他限制，瀏覽器在許多地方確實支持更大的 dataURL，例如 <img>、<video>、<iframe> 等。

您可以在此處查看實時重現但請注意，如果您使用的是 Firefox，它可能會使您的瀏覽器崩潰，因此請自行承擔切換復選框的風險。 _{（外包是因為 Chrome 無法從 StackSnippet 的 null 來源的 iframe 中加載 pdf）。}

---

要修復，請將您的 base64 數據轉換回二進制文件，打包在Blob中，然后將 iframe 的 src 設置為指向該 Blob 的blob-URI ：

const blob = base64ToBlob( base64, 'application/pdf' );
const url = URL.createObjectURL( blob );
const pdfWindow = window.open("");
pdfWindow.document.write("<iframe width='100%' height='100%' src='" + url + "'></iframe>");

function base64ToBlob( base64, type = "application/octet-stream" ) {
  const binStr = atob( base64 );
  const len = binStr.length;
  const arr = new Uint8Array(len);
  for (let i = 0; i < len; i++) {
    arr[ i ] = binStr.charCodeAt( i );
  }
  return new Blob( [ arr ], { type: type } );
}

再次作為外包 plnkr 進行現場演示。

但請注意，如果您的 API 將 pdf 直接作為 Blob 發送，或者即使您可以使 <iframe> 直接指向資源的 ZE6B391A8D2C4D459702A23A8B65D，效率會更高。

Answer 2

您可以改為嘗試將文件讀取/存儲為 Blob，然后使用FileSaver.js中的 saveAs 下載或打開 pdf 文件

Answer 3

大多數流行瀏覽器上的 URL 限制通常為 65,535 個字符（~64 KB），因此這是對 URL 中字符數的限制。 您通常希望此數字低於 2,000 (2 KB)，以便您的網站可以在大多數瀏覽器上運行（某些情況下是舊版瀏覽器）。

請參閱： https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/Data_URIs

長度限制

盡管 Firefox 支持基本上無限長度的data URL，但瀏覽器不需要支持任何特定的最大data長度。 例如，Opera 11 瀏覽器將 URL 限制為 65535 個字符，這將data URL 限制為 65529 個字符（65529 個字符是編碼數據的長度，而不是源，如果您使用純data: ，而不指定 MIME 類型）。

也可以看看

• https://en.wikipedia.org/wiki/Data_URI_scheme#Syntax
• https://stackoverflow.com/a/417184/1762224