Merge Multiple Base64 Decoded pdf to one pdf using reactjs

Question

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.

did you fixed this issue? how to fixed it?

Dolphin
– Dolphin

2023-08-17 09:26:10 +00:00
Commented Aug 17, 2023 at 9:26 — Dolphin
– Dolphin, Commented Aug 17, 2023 at 9:26

Punit · Accepted Answer · 2021-02-11 11:25:31Z

1

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

edited Feb 11, 2021 at 11:25

answered Feb 11, 2021 at 11:20

Punit

112 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Merge Multiple Base64 Decoded pdf to one pdf using reactjs

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related