将 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 渲染为准备好的 canvas.

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

PDFJS.getDocument(FILE_PATH)

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

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

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

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

谢谢

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

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