IONIC 3和jsPDF,使用FILE Transfer下载pdf无效

时间:2017-10-24 19:09:06

标签: cordova ionic-framework cordova-plugins ionic3 ionic-native

我想使用jsPDF库和IONIC3下载PDF,我创建了一个简单的文档,当我尝试使用jsPDF doc.Save()的默认函数下载它时,它可以在我的浏览器中运行,但是在一个真实的设备中不会工作。 所以我决定使用来自IONIC native的FileTransfer插件,我首先从jsPDF输出创建了一个blob文件,然后我尝试使用IONIC FILE插件中的writeFile()函数创建一个新文件从blob,然后我尝试使用FileTransfer中的Download()函数下载该文件,这是我的代码: `

createPdf(){
    const fileTransfer: FileTransferObject = this.transfer.create();
    //Initialize jsPdf
    let doc = new jsPDF();
    doc.setFontStyle('Bold');
    doc.setFontSize(14);
    doc.text('Testing PDFs', 20, 20);
    // doc.save("example.pdf") This is the default way to download pdf In jsPDF , but it's not working in ionic
    // So Here i create new File from the blob
    let blob = doc.output('blob', {type: 'application/pdf'});
    this.file.writeFile(this.file.dataDirectory,"example.pdf",blob)
    .then((value)=>{
              console.log("File created successfly" + value);
              // if The file successfuly created , i want to download it
              fileTransfer.download( this.file.dataDirectory+"example.pdf" ,this.file.dataDirectory+"example.pdf")
                .then((entry)=>{
                  console.log("Download Success : " , entry);
                })
                .catch((error)=>{
                      console.log("Error when downloading file : " ,error);
                })
    })
    .catch((error)=>{
      console.log("Error creating File");
    });
)

`

如果我查看我的输出控制台一切正常,但没有任何事情发生!!

  

[19:50:26] console.log:文件创建了successfly {" isFile":true," isDirectory":false," name":& #34;为例.pdf"" FULLPATH":" /example.pdf","文件系统":"",& #34; nativeURL":"文件:///data/user/0/io.ionic.starter/files/exam

     

[19:50:26] console.log:下载成功:               {" ISFILE":真," isDirectory":假,"名称":"为例.pdf"" FULLPATH&#34 ;:" /example.pdf","文件系统":""" nativeURL":"文件:///数据/用户/ 0 / io.ionic.starter /文件/为例.pdf"}

2 个答案:

答案 0 :(得分:0)

请使用以下代码:

storageReference.child("YOUR_CHILD")
    .putFile("FILE")
    .addOnSuccessListener(new OnSuccessListener() {
       @Override
       public void onSuccess(UploadTask.TaskSnapshot taskSnapshot) {
             taskSnapshot
               .getStorage()
               .getDownloadUrl()
               .addOnSuccessListener(new OnSuccessListener() {
                                @Override
                                public void onSuccess(Uri uri) {
                                    //Put your result here
                                }
                            });

                   }   

答案 1 :(得分:0)

我会把它放在对某人有用的情况下,我的解决方案很简单但很实用。

 html2canvas(document.querySelector('#sect')).then(canvas => {
        let pdfOutput = doc.output();
        // using ArrayBuffer will allow you to put image inside PDF
        let buffer = new ArrayBuffer(pdfOutput.length);
        let array = new Uint8Array(buffer);
        for (var i = 0; i < pdfOutput.length; i++) {
          array[i] = pdfOutput.charCodeAt(i);
        }
        const directory = this.file.externalApplicationStorageDirectory;
        this.file.writeFile(directory, fileName, buffer)
          .then((success) => {
            console.log("File created Succesfully" + JSON.stringify(success));
            this.fileOpener.open(success.nativeURL, 'application/pdf').then((response) => {
              self.loadingService.hide();
            }).catch((err) => {
              console.log(err);
              self.loadingService.hide();
            });
          })
          .catch((error) => {
            console.log("Cannot Create File " + JSON.stringify(error));
            self.loadingService.hide();
          });
});

我是stackoverflow中的新解决方案,了解我是否仍然无法正确使用它