How to convert some base64 string to pdf using javascript

Question

There is a program (in asp.net mvc) on browser that connect to scanner, Scan document and show it as images. enter image description here

Src of image is like below:

data:application/octet-stream;base64,Qk0m2wEAAAAAAD4AAAAoAAAAOAMAAJEEAAABA//////////////////////wAGA/wAYMQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAQAg13xAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD/

Now, I want convert all of images to one pdf and attach it to a file upload.

Could you help me please?

Possible duplicate of [Save base64 string as PDF at client side with JavaScript](https://stackoverflow.com/questions/11415665/save-base64-string-as-pdf-at-client-side-with-javascript) — ellipsis, Mar 18 '19 at 06:41

score 9 · Accepted Answer · answered Mar 18 '19 at 07:12

9

Please use the below code to convert Base64 to PDF with the client side JavaScript. Pass the base64 data to the function base64ToArrayBuffer

function base64toPDF(data) {
    var bufferArray = base64ToArrayBuffer(data);
    var blobStore = new Blob([bufferArray], { type: "application/pdf" });
    if (window.navigator && window.navigator.msSaveOrOpenBlob) {
        window.navigator.msSaveOrOpenBlob(blobStore);
        return;
    }
    var data = window.URL.createObjectURL(blobStore);
    var link = document.createElement('a');
    document.body.appendChild(link);
    link.href = data;
    link.download = "file.pdf";
    link.click();
    window.URL.revokeObjectURL(data);
    link.remove();
}

function base64ToArrayBuffer(data) {
    var bString = window.atob(data);
    var bLength = bString.length;
    var bytes = new Uint8Array(bLength);
    for (var i = 0; i < bLength; i++) {
        var ascii = bString.charCodeAt(i);
        bytes[i] = ascii;
    }
    return bytes;
};

answered Mar 18 '19 at 07:12

Prasanna Brabourame

837
8
17

Hello, It's not working for me, here is my data format, "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2...." – Mamunur Rashid Apr 08 '21 at 16:58
1

@MamunurRashid change file type to image/jpeg the above one is for PDF. – Prasanna Brabourame Jun 16 '21 at 23:07
1

msSaveOrOpenBlob is deprecated and no longer being used. – mahen23 Oct 19 '21 at 09:31
@mahen23 it is an if condition it will use only if msSaveOrOpenBlob is present if not it will work on alternative way without executing if condition – Prasanna Brabourame Feb 19 '22 at 08:10

score 0 · Answer 2 · answered Mar 18 '19 at 07:15

0

You need some kind of JavaScript PDF library to do this. jsPDF for instance has a addImage() method (https://rawgit.com/MrRio/jsPDF/master/docs/module-addImage.html) which accepts a base64 string as input

answered Mar 18 '19 at 07:15

marcobiedermann

4,317
3
24
37

How to convert some base64 string to pdf using javascript

2 Answers2