将PDF文件系统加载到Ionic(Cordova)+ Android + pdf.js应用程序中

Question

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

当我尝试使用以下命令加载文档时,会发生此问题:

PDFJS.getDocument(FILE_PATH)

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

我试过试验PDFJS.disableWorker.将此设置为false会导致cannot read property 'length' of null设置为true会导致加载xhr请求无法加载文件的文件时出错.

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

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

谢谢

Answer 1

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

$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

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");
});