将 PDF 从文件系统加载到 Ionic (Cordova) + Android + pdf.js 应用程序中 [英] Load PDF from filesystem into an Ionic (Cordova) + Android + pdf.js application

问题描述

我无法将 pdf.js 集成到 Android Ionic 应用程序中.我希望 pdf.js 将 pdf 渲染到准备好的画布上.

I have trouble integrating pdf.js into an Android Ionic application. I want pdf.js to render a pdf to a prepared canvas.

当我尝试使用以下方法加载文档时出现问题:

The problem occurs when I am trying to load the document using:

PDFJS.getDocument(FILE_PATH)

总是以错误告终.我做了一些研究，在 SO 和互联网上有很多关于将文件加载到 pdf.js 的问题，但是他们讨论从服务器加载 pdf，而不是 file:// url，或者他们提出了一些本机 Android 代码的更改，我想避免:如果可能，我正在寻找纯 JS 科尔多瓦解决方案或插件.

which always ends up with an error. I did some research, there are a lot of questions on SO and the internet on loading files to pdf.js but either they discuss loading pdfs from server, not file:// urls, or they propose some changes in native android code, which I would like to avoid: if possible I am looking for a pure JS cordova solution, or a plugin.

我尝试使用 PDFJS.disableWorker 进行试验.将此设置为 false 会导致 cannot read property 'length' of null，设置为 true 会导致在加载文件时出错，xhr 请求无法加载文件.

I tried experimenting with PDFJS.disableWorker. Setting this to false results in cannot read property 'length' of null, setting to true results in errors while loading the file that xhr request couldn't load the file.

我应该在配置文件中设置了所有必要的读取权限.

I should have all the necessary read permission set in the configuration file.

我的问题是，如果有人使用 pdf.js，最好使用 JS 或插件，成功地将本地 (file://..) pdf 加载到cordova 应用程序中，因为我想如果可能，请扩展到其他平台.

My question is, if anyone successfully loaded a local (file://..) pdf into a cordova application using pdf.js, preferably using JS or a plugin, because I would like to expand to other platforms, if possible.

谢谢

推荐答案

正如用户 async5 所指出的，PDFJS.getDocument() 接受 3 种不同格式的输入.除了 URL，它还接受 Uint8Array 数据.所以需要另外两个步骤来获取所需格式的文件，首先是将文件加载为数组缓冲区，第二步是将其转换为 Uint8Array.以下是使用 Cordova 文件插件的 Ionic 纯 JS 示例:

As user async5 pointed out, PDFJS.getDocument() accepts input in 3 different formats. Apart from URL, it also accepts Uint8Array data. So two more steps are needed to get file in desired format, first is to load the file as array buffer and the second is to convert it to Uint8Array. Following is working, pure JS example for Ionic, using Cordova File plugin:

$cordovaFile.readAsArrayBuffer(DIRECTORY_URL, FILENAME).then(function(arraybuffer) { //DIRECTORY_URL starts with file://
  var uInt8Arr = new Uint8Array(arraybuffer);
  PDFJS.getDocument(uInt8Arr).then(function(pdf) {
      //do whatever you want with the pdf, for example render it using 'pdf.getPage(page) and page.render() functions
  }, function (error) {
      console.log("PDFjs error:" + error.message);
  });
}, function(error){
  console.log("Load array buffer error:" + error.message);
});

这是一个 Cordova 示例，未使用 Ionic

this is an Cordova example, without using Ionic

window.resolveLocalFileSystemURI(FILE_URL, function(e){
    e.file(function(f){
        var reader = new FileReader();
        reader.onloadend = function(evt) {
            PDFJS.getDocument(new Uint8Array(evt.target.result)).then(function(pdf) {
                //do whatever you want with the pdf, for example render it using 'pdf.getPage(page) and page.render() functions
            }, function (error) {
                console.log("PDFjs error:" + error.message);
            });
        };
        reader.readAsArrayBuffer(f);
    });
}, function(e){
    console.log("error getting file");
}); 

这篇关于将 PDF 从文件系统加载到 Ionic (Cordova) + Android + pdf.js 应用程序中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！