javascript - 使用 pdfjs 时无法通过在 viewer.html 文件参数中传递 Uint8Array 来呈现 pdf
问题描述
我正在尝试使用电子创建一个应用程序并做出反应,我正在尝试使用本地文件系统中的 pdfjs 呈现 pdf。我将从电子获取 pdf 数据,然后将其传递给 react 应用程序。
在查看 viewer.js 文件的代码后,我可以看到我可以将文件参数值作为 Uint8Array 发送,然后它会用data调用 PDFJS 的 getDocument ,所以我尝试了一个小例子,但不知何故我无法得到它工作。
粘贴下面的代码
base64ToUint8Array = () => {
// taken from pdfjs github example
let raw = atob(
'JVBERi0xLjcKCjEgMCBvYmogICUgZW50cnkgcG9pbnQKPDwKICAvVHlwZSAvQ2F0YWxvZwog' +
'IC9QYWdlcyAyIDAgUgo+PgplbmRvYmoKCjIgMCBvYmoKPDwKICAvVHlwZSAvUGFnZXMKICAv' +
'TWVkaWFCb3ggWyAwIDAgMjAwIDIwMCBdCiAgL0NvdW50IDEKICAvS2lkcyBbIDMgMCBSIF0K' +
'Pj4KZW5kb2JqCgozIDAgb2JqCjw8CiAgL1R5cGUgL1BhZ2UKICAvUGFyZW50IDIgMCBSCiAg' +
'L1Jlc291cmNlcyA8PAogICAgL0ZvbnQgPDwKICAgICAgL0YxIDQgMCBSIAogICAgPj4KICA+' +
'PgogIC9Db250ZW50cyA1IDAgUgo+PgplbmRvYmoKCjQgMCBvYmoKPDwKICAvVHlwZSAvRm9u' +
'dAogIC9TdWJ0eXBlIC9UeXBlMQogIC9CYXNlRm9udCAvVGltZXMtUm9tYW4KPj4KZW5kb2Jq' +
'Cgo1IDAgb2JqICAlIHBhZ2UgY29udGVudAo8PAogIC9MZW5ndGggNDQKPj4Kc3RyZWFtCkJU' +
'CjcwIDUwIFRECi9GMSAxMiBUZgooSGVsbG8sIHdvcmxkISkgVGoKRVQKZW5kc3RyZWFtCmVu' +
'ZG9iagoKeHJlZgowIDYKMDAwMDAwMDAwMCA2NTUzNSBmIAowMDAwMDAwMDEwIDAwMDAwIG4g' +
'CjAwMDAwMDAwNzkgMDAwMDAgbiAKMDAwMDAwMDE3MyAwMDAwMCBuIAowMDAwMDAwMzAxIDAw' +
'MDAwIG4gCjAwMDAwMDAzODAgMDAwMDAgbiAKdHJhaWxlcgo8PAogIC9TaXplIDYKICAvUm9v' +
'dCAxIDAgUgo+PgpzdGFydHhyZWYKNDkyCiUlRU9G');
let uint8Array = new Uint8Array(new ArrayBuffer(raw.length));
for (var i = 0; i < raw.length; i++) {
uint8Array[i] = raw.charCodeAt(i);
}
return uint8Array;
render(){
let pdfUint8Array = this.base64ToUint8Array();
return(
<iframe
src={`/web/viewer.html?file=${pdfUint8Array}`}
title="frame"
width="100%"
height="700px"
/>
);
}
从浏览器控制台上的错误中,我可以看到文件参数值仍被视为 url,因此 pdf 没有被呈现。
Error
fetch_stream.js:101 GET http://localhost:3001/web/37,80,68,70,45,49,46,55,10,10,49,32,48,32,111,98,106,32,32,37,32,101,110,116,114,121,32,112,111,105,110,116,10,60,60,10,32,32,47,84,121,112,101,32,47,67,97,116,97,108,111,103,10,32,32,47,80,97,103,101,115,32,50,32,48,32,82,10,62,62,10,101,110,100,111,98,106,10,10,50,32,48,32,111,98,106,10,60,60,10,32,32,47,84,121,112,101,32,47,80,97,103,101,115,10,32,32,47,77,101,100,105,97,66,111,120,32,91,32,48,32,48,32,50,48,48,32,50,48,48,32,93,10,32,32,47,67,111,117,110,116,32,49,10,32,32,47,75,105,100,115,32,91,32,51,32,48,32,82,32,93,10,62,62,10,101,110,100,111,98,106,10,10,51,32,48,32,111,98,106,10,60,60,10,32,32,47,84,121,112,101,32,47,80,97,103,101,10,32,32,47,80,97,114,101,110,116,32,50,32,48,32,82,10,32,32,47,82,101,115,111,117,114,99,101,115,32,60,60,10,32,32,32,32,47,70,111,110,116,32,60,60,10,32,32,32,32,32,32,47,70,49,32,52,32,48,32,82,32,10,32,32,32,32,62,62,10,32,32,62,62,10,32,32,47,67,111,110,116,101,110,116,115,32,53,32,48,32,82,10,62,62,10,101,110,100,111,98,106,10,10,52,32,48,32,111,98,106,10,60,60,10,32,32,47,84,121,112,101,32,47,70,111,110,116,10,32,32,47,83,117,98,116,121,112,101,32,47,84,121,112,101,49,10,32,32,47,66,97,115,101,70,111,110,116,32,47,84,105,109,101,115,45,82,111,109,97,110,10,62,62,10,101,110,100,111,98,106,10,10,53,32,48,32,111,98,106,32,32,37,32,112,97,103,101,32,99,111,110,116,101,110,116,10,60,60,10,32,32,47,76,101,110,103,116,104,32,52,52,10,62,62,10,115,116,114,101,97,109,10,66,84,10,55,48,32,53,48,32,84,68,10,47,70,49,32,49,50,32,84,102,10,40,72,101,108,108,111,44,32,119,111,114,108,100,33,41,32,84,106,10,69,84,10,101,110,100,115,116,114,101,97,109,10,101,110,100,111,98,106,10,10,120,114,101,102,10,48,32,54,10,48,48,48,48,48,48,48,48,48,48,32,54,53,53,51,53,32,102,32,10,48,48,48,48,48,48,48,48,49,48,32,48,48,48,48,48,32,110,32,10,48,48,48,48,48,48,48,48,55,57,32,48,48,48,48,48,32,110,32,10,48,48,48,48,48,48,48,49,55,51,32,48,48,48,48,48,32,110,32,10,48,48,48,48,48,48,48,51,48,49,32,48,48,48,48,48,32,110,32,10,48,48,48,48,48,48,48,51,56,48,32,48,48,48,48,48,32,110,32,10,116,114,97,105,108,101,114,10,60,60,10,32,32,47,83,105,122,101,32,54,10,32,32,47,82,111,111,116,32,49,32,48,32,82,10,62,62,10,115,116,97,114,116,120,114,101,102,10,52,57,50,10,37,37,69,79,70 404 (Not Found)
我还可以在控制台将文件参数记录为文件 [object ArrayBuffer]时看到,如果我在文件参数中传递 pdfUint8Array.buffer 但 pdf 仍然没有呈现,因为它被视为字符串,因为 pdfjs 尝试使用 url 显示它.
解决方案
CodeSAndbox 演示(在新选项卡中打开代码和框的结果以使其工作)
嘿,海腾,
显然在PDF.js的mozilla官方文档中,他们说不需要转换为字节数组(uint8Array),您可以直接将base64代码解析为pdf....
只需data:application/pdf;base64
像这样在原始base64数据之前渲染iframe,它就会出现:)
<iframe
title="frame"
width="300px"
height="700px"
src={`data:application/pdf;base64,${this.base64PDF()}`} />
另一个 Stackoverflow 线程中的一个很好的参考,讨论了使用 base64 而不是 url 呈现 pdf 文件
希望对你有帮助✌</p>
推荐阅读
- c - 我在代码中遗漏了什么吗?结果不对
- python - 为什么 Selenium 方法 get(),第二次不起作用?
- r - 基于另一列的总预算的 15 个项目的最高总价值
- ios - IOS:无法使用 URL 打开 Apple 的邮件应用程序
- django - Django cloudinary 图像如何在模板 {% %} 标签中添加 onClick 事件?
- kubernetes - 如何在kong rate limit中为单个服务应用多个速率限制
- flutter - 热重载时flutter web中的空白浏览器
- regex - 使用正则表达式提取 mul 单词和字符串
- heroku - 当 Koa-Static 服务器在本地正常工作时,为什么 Heroku 会发送 404?
- python - Groupby:在同一张表中获取“计数”和“百分比”