Hi everyone, I’m trying to open a PDF document, starting from a base64 string.
I’ve tried everything, but I need a little support to solve this problem.
I use File and FileOpener
import { File } from '@ionic-native/file/ngx';
import { FileOpener } from '@ionic-native/file-opener/ngx';
- This simple HREF, open the PDF in iOS device, I don’t know why doesn’t works in Android device.
The PDF is opened over all and it is not possible to close it unless killing the app.
<ion-item href="data:application/pdf;base64,{{ stringBase64PDF }}">
<ion-label>HREF</ion-label>
</ion-item>
- I try to follow the example in this topic Ionic - Base64 PDF
openPDF () {
fetch('data:application/pdf;base64,' + this. stringBase64PDF, {
method: "GET"
})
.then(res => res.blob()).then(blob => {
console.log("created blob");
this.file.createFile(this.file.dataDirectory, 'temp.pdf', true)
.then(() => {
console.log("file created");
this.file.writeFile(this.file.dataDirectory, 'temp.pdf', blob, { replace: true })
.then(res => {
console.log("file writed");
this.opener.open(res.toInternalURL(), 'application/pdf')
.then((res) => {
console.log('file opened')
}).catch(err => {
console.log('open error')
});
}).catch(err => {
console.log('write error')
});
}).catch(() => {
console.log("create error");
})
}).catch(err => {
console.log('blob error')
});
}
the logs arrive up to “file created”.
- I also tried to use a conversion function
b64toBlob(b64Data, contentType = '', sliceSize = 512) {
var byteCharacters = atob(b64Data);
var byteArrays = [];
for (var offset = 0; offset < byteCharacters.length; offset += sliceSize) {
var slice = byteCharacters.slice(offset, offset + sliceSize);
var byteNumbers = new Array(slice.length);
for (var i = 0; i < slice.length; i++) {
byteNumbers[i] = slice.charCodeAt(i);
}
var byteArray = new Uint8Array(byteNumbers);
byteArrays.push(byteArray);
}
var blob = new Blob(byteArrays, { type: contentType });
return blob;
}
I noticed that passing the string in base64 directly as content, the fileopener opens but with an invalid file format, while trying to convert it to blob, it stops creating the file and does not write it.
savebase64AsPDF(folderpath, filename, content, contentType, b642blob = true) {
// Convert the base64 string in a Blob
var DataBlob = (b642blob) ? this.b64toBlob(content, contentType) : content;
// content = "data:application/pdf;base64,"+ content;
console.log("Starting to write the file");
this.file.checkFile(folderpath + 'argos', filename)
.then((succ)=> {
console.log("checkFile then", succ);
this.file.writeFile(folderpath + 'argos', filename, DataBlob, { replace: true })
.then(res => {
console.log("writeFile then", res);
// this.opener.open(res.toInternalURL(), contentType)
this.opener.open(folderpath + 'argos/' + filename, contentType)
.then((res) => {
console.log("open then", res);
}).catch((err) => {
console.log("open catch", err);
});
}).catch((err) => {
console.log("writeFile catch", err);
});
}).catch((err) => {
console.log("checkFile error", err)
this.file.createFile(folderpath + "argos", filename, true)
.then((succ) => {
console.log("createFile then", succ);
this.file.writeFile(folderpath + 'argos', filename, DataBlob, { replace: true })
.then(res => {
console.log("writeFile then", res);
// this.opener.open(res.toInternalURL(), contentType)
this.opener.open(folderpath + 'argos/' + filename, contentType)
.then((res) => {
console.log("open then", res);
}).catch(err => {
console.log("open catch", err)
});
}).catch(err => {
console.log("writeFile catch", err)
});
}).catch((err) => {
console.log("createFile then", err);
})
});
}
