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

问题描述

我无法将pdf.js集成到Android Ionic应用程序中。

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：// urls，或者他们建议在本机Android代码中的一些变化，我想避免：如果可能，我正在寻找一个纯JS cordova解决方案或插件。

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导致无法读取null 的属性length，设置为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将一个本地（ 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.

感谢

推荐答案

as async5指出， PDFJS.getDocument（）接受3种不同格式的输入。除了URL，它还接受 Uint8Array 数据。因此，需要两个更多的步骤来获得所需的格式的文件，首先是加载文件作为数组缓冲区，第二个是将其转换为Uint8Array。以下是Ionic的纯JS示例，使用Cordova文件插件：

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屋！