如何通过XHR将资源/ www文件夹中的PDF保存到Cordova中的文件系统?

时间:2013-05-23 05:18:50

标签: ios pdf cordova

我正在尝试使用PDFjs在Cordova iOS(以及可能更晚的Android)中显示PDF。似乎PDFjs需要从网络服务器提供的文件才能使用其正常的加载功能,但它会接受编码为Uint8Array的PDF。

我试图使用Cordova的FileAPI,它有加载到Uint8Array的方法来加载可以从Documents文件夹加载的PDF,但是我可以告诉API看起来没有能力访问www中的文件。

PDF需要最初与应用程序捆绑在一起,并且如果它们不同步则需要通过应用程序进行更新,因此我希望能够将它们作为源的一部分,然后将它们复制到文档中文件夹可操作/可写。

如何将文件从www文件夹复制到Documents文件夹?我想这是一个常见的场景,但很难在网上找到这个例子。

任何帮助表示感谢。

里卡德

更新

到目前为止,我已经能够使用文件传输从单独的网络服务器下载文件:

var fileTransfer = new FileTransfer();

fileTransfer.download(
    'http://localhost:8080/data/output8.pdf',// This is a webserver I am running
    _fileSystem.root.fullPath+'/output8.pdf',
    function(entry) {
        console.log("download complete: " + entry.fullPath);
    },
    function(error) {
        console.log("download error source " + error.source);
        console.log("download error target " + error.target);
        console.log("upload error code" + error.code);
    }
);

如果我想从远程服务器下载所有PDF,但我需要从www文件夹下载它们,这很好,我似乎找不到这样做的路径。我尝试过:file:///data/output8.pdfdata/output8.pdf/data/output8.pdf

引用这些路径的正确方法是什么?

更新2 - 死角无法保存为二进制

所以我几个小时后仍然坚持下去。我已经正确地渲染了PDFjs,但只能从我从Web服务器提供的文件然后FileTransfer到本地文件系统,而不是我与应用程序捆绑在一起的文件。我设法使用XHR将文件从www加载到ArrayBuffer但无法保存。

var xhr = new XMLHttpRequest();
xhr.open('GET','data/output8.pdf',true);
xhr.responseType = 'arraybuffer';
xhr.onload = function(e){
    var itWorked=this.status==0&&(this.response instanceof ArrayBuffer);
    console.log(itWorked?'looks like it worked':'hmm there was an issue: '+this.status);
    var myArrayBuffer = this.response;

    theFileSystem.root.getFile('output8.pdf',{create:true},function(entry){
        entry.createWriter(function(fileWriter){
          fileWriter.onwrite = function(){
            console.log('file has been written');
          };
            // Turns out the following does not work in 
            // Cordova which cannot write binary to a file.
            var blob = new Uint8Array(myArrayBuffer);
        fileWriter.write(blob);//Doesnt work
    },fail);
    },fail);                
}
xhr.ontimeout=function(e){
    console.log('timeout');
}
xhr.send();

2 个答案:

答案 0 :(得分:2)

经过一夜好眠,我设法解决了这个问题。解决方案是确定相对绝对路径,然后编码路径URL,如下所示:

var fileTransfer = new FileTransfer();
var relativeFileLocation = 'data/output8.pdf';
var fileSystemFileLocation = '/output8.pdf';
var docsPath = fileSystem.root.fullPath;
var wwwPath = docsPath.substring(0, docsPath.lastIndexOf('/'))+'/testios27.app/www/'
var filePath = wwwPath+relativeFileLocation;
fileTransfer.download(
    'file://'+encodeURI(filePath),
    theFileSystem.root.fullPath+'/output8.pdf', // Ouput path
    onTransferComplete,
    fail);

对此存在的问题主要是可能需要针对不同平台不同地计算路径。

答案 1 :(得分:0)

回答michal如何获得完整的路径。

window.requestFileSystem  = window.requestFileSystem || window.webkitRequestFileSystem;  window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, gotFS, fail);function gotFS(fileSystem) {
alert("entered gotFS: " + fileSystem.root.fullPath);
}