我正在使用以下代码使用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>");
答案 0 :(得分:2)
对于Chrome浏览器的pdf阅读器插件和Mozilla的pdf.js(供Firefox使用),对于数据URI加载的pdf文档的大小似乎确实存在限制。
请注意,此限制不是由这些插件/脚本(pdf.js甚至会使选项卡崩溃)决定的,浏览器在许多地方确实支持更大的dataURL,例如,
You can see a live repro here 但是请注意,如果您使用的是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 } );
}
Once again Live Demo as an outsourced plnkr。
但是请注意,如果您的API以Blob的形式直接发送pdf,或者即使您可以直接将
答案 1 :(得分:0)
在大多数流行的浏览器中,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个字符(如果使用普通的data:
,则URL的编码数据的长度而不是源的长度为65529,而不指定MIME类型。
答案 2 :(得分:0)
您可以改为尝试将文件读取/存储为Blob,然后使用saveAs from FileSaver.js下载或打开pdf文件