CODEWITHSUNDEEP
javascripthtmlreactjspdfbase64
Shipra Vishnoi
Shipra Vishnoi

Reputation: 21

Merge Multiple Base64 Decoded pdf to one pdf using reactjs

I am getting a base64 encoded pdf as multiple response and I have to decode it to create one pdf.

Here is my code for reference.

var pdf_base1 = "data:application/pdf;base64,JVBERi0xLjQKJfbk/N8KMSAwIG9iago8PAovVHlwZSAvQ2F0YWxvZwovUGFnZXMgMiAwIFIKL0Fjcm9Gb3JtIDMgMCBSCi9NZXRhZGF0YSA0IDAgUgo+PgplbmRvYmoKNSAwIG9iago8PAovUHJvZHVZXIgKFJBRCBQREYg..." //shortend

var pdf_base2 = "data:application/pdf;base64,JVBERi0xLjQKJfbk/N8KMSAwIG9iago8PAovVHlwZSAvQ2F0YWxvZwovUGFnZXMgMiAwIFIKL0Fjcm9Gb3JtIDMgMCBSCi9NZXRhZGF0YSA0IDAgUgo+PgplbmRvYmoKNSAwIG9iago8PAovUHJvZHVZXIgKFJBRCBQREYg..." //shortend

var pdfDoc,pageNum= 1,pageNumPending = null,pageRendering = false, 
pdf= [];
pdf.push(pdf_base1,pdf_base2);
pdf.map(each=>{
   this.callPdfLib(each);
})

callPdfLib=(data)=>{
    var self = this;
    // var files = self.state.files;
    var pageCount = this.pageCount;
    var arrrBuffer = self.base64ToArrayBuffer(data);
    pdfjsLib.getDocument({data:arrrBuffer}).promise.then(function(page) {
      pdfDoc = page;
      pageCount.textContent = page.numPages;
      self.renderPage(pageNum);
    });
  }

renderPage=(num)=>{
    var canvas = this.canvas;
    pageRendering = true;
    pdfDoc.getPage(num).then(function(page) {
      var scale = 1.5;
      var viewport = page.getViewport({scale: scale});
      var context = canvas.getContext('2d');
      canvas.height = viewport.height;
      canvas.width = viewport.width;

      var renderContext = {
        canvasContext: context,
        viewport: viewport
      };
      var renderTask = page.render(renderContext);
      renderTask.promise.then(function() {
        pageRendering = false;
        if (pageNumPending !== null) {
          this.renderPage(pageNumPending);
          pageNumPending = null;
        }
      });
    })
  }

Both variables are base64 encode pdfs. By doing this, I am getting an error.

Unhandled Rejection (Error): Cannot use the same canvas during multiple render() operations. Use different canvas or ensure previous operations were cancelled or completed.

Upvotes: 2

Views: 2780

Answers (1)

Punit
Punit

Reputation: 11

you have to create a canvas for each page and append it to the body of your container element, also as it is an async operation you can use async/await so that it previews the first page then the second, and so on.

You can use this link for reference https://gist.github.com/fcingolani/3300351

Upvotes: 1

Related Questions