con_meo_Free
con_meo_Free

Reputation: 1

pdf lose image when using window.URL and view via PDFJS

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

Answers (0)

Related Questions