Reputation: 1
I read a pdf file from computer then convert to base64, then using window.URL to create a url and view it via PDFJS, but some images on the pdf file were lost, this is my code:
const fileReader = new FileReader();
fileReader.readAsDataURL(file);
fileReader.onload = (e) => {
const base64result = fileReader.result.toString().split(',')[1];
const fileInput: any = document.getElementById('file-input');
fileInput.value = '';
this.pdfSrc = Helper._getUrlPdf(base64result);
this.getPage();
};
Create url using window.URL
_getUrlPdf(pdf_file, application?) {
const b64toBlob = (b64Data, contentType = '', sliceSize = 512) => {
const byteCharacters = atob(b64Data);
const byteArrays = [];
for (let offset = 0; offset < byteCharacters.length; offset += sliceSize) {
const slice = byteCharacters.slice(offset, offset + sliceSize);
const byteNumbers = new Array(slice.length);
for (let i = 0; i < slice.length; i++) {
byteNumbers[i] = slice.charCodeAt(i);
}
const byteArray = new Uint8Array(byteNumbers);
byteArrays.push(byteArray);
}
const blob = new Blob(byteArrays, { type: contentType });
return blob;
}
const blob = b64toBlob(pdf_file, !application ? "application/pdf" : application);
var objectUrl = window.URL.createObjectURL(blob);
return objectUrl;
}
Then view it via PDFJS
getPage() {
PDFJS.getDocument(this.pdfSrc).then((pdf) => {
this.thePDF = pdf;
this.pageNumber = (pdf.numPages || pdf.pdfInfo.numPages);
const pageNumber = pdf.numPages;
for (let page = 1; page <= pageNumber; page++) {
const canvas = document.createElement('canvas');
canvas.className = 'view-canvas';
canvas.id = 'canvas' + page;
canvas.style.border = '9px solid transparent';
canvas.style.borderImage = 'url(assets/img/shadow.png) 9 9 repeat';
const viewer = document.getElementById('pdf-viewer');
viewer.appendChild(canvas);
this.renderPage(page, canvas);
}
});
}
renderPage(pageNumber, canvas) {
//This gives us the page's dimensions at full scale
this.thePDF.getPage(pageNumber).then((page) => {
const viewport = page.getViewport(this.scale);
canvas.height = viewport.height;
canvas.width = viewport.width;
page.render({ canvasContext: canvas.getContext('2d'), viewport: viewport });
this.activeOnScroll();
});
}
This is the original file enter image description here
This is the file after conversion enter image description here Has anyone had a similar situation?
Upvotes: 0
Views: 19