Question

我想使用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 {＆＃34; isFile＆＃34;：true，＆＃34; isDirectory＆＃34;：false，＆＃34; name＆＃34;：＆＃34;为例.pdf＆＃34;＆＃34; FULLPATH＆＃34;：＆＃34; /example.pdf"，＆＃34;文件系统＆＃34;：＆＃34;＆＃34;，＆＃34; nativeURL＆＃34;：＆＃34;文件：///data/user/0/io.ionic.starter/files/exam

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

Answer 1

请使用以下代码：

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

                   }

Answer 2

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

 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中的新解决方案，了解我是否仍然无法正确使用它

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

2 个答案: