Ajax call to return PDF file as base64 string

Question

Im using ajax in an angular js environment to called a local file (a pdf file). The called is successful, however the data return by the ajax call is in garbled code (not sure if i used the right term here, but is just like opening a pdf file using a text editor). Is there anyway that i could get the return result as base64 string?

The reason behind this is to merge up with some of the existing pdf , but before that, i would need the base64 string of the pdf. Below are my ajax call code,

$.ajax({           
    url : 'path/to/pdfFile.pdf',
    success : function(data) {
       console.log(data); //expecting base64 string here
    },
    error: function(xhr, textStatus, errorThrown){
      console.log('request failed');
    },
    async : false
});

Maybe this can help you: http://stackoverflow.com/questions/7370943/retrieving-binary-file-content-using-javascript-base64-encode-it-and-reverse-de There is a function for encoding a response in base64 in the accepted answer — DaTebe, Jun 13 '16 at 10:28
Hi @DaTebe, i tried passing the returned data from ajax to "base64ArrayBuffer" method of the stack overflow answer that you mention, it is giving a "Invalid array length argument", anything i need to do before passing the data to the method? — Chris, Jun 13 '16 at 10:39
Hi @DaTebe, thanks for the guide, i manage to convert it to base64, i'll be posting the answer now. — Chris, Jun 13 '16 at 10:53
Nice to hear! You switched from jQuery to Vanilla JS. But it should also work with jQuery? — DaTebe, Jun 13 '16 at 11:11
jQuery?Vanilla Js? I'm just using angular js and normal javascript haha — Chris, Jun 14 '16 at 03:13
$.ajax() is a jQuery function. And `new XMLHttpRequest();` etc. is plane Javascript (alias vanilla javascript) — DaTebe, Jun 14 '16 at 06:01

score 3 · Accepted Answer · edited Feb 22 '18 at 11:17

I managed to convert the pdf file (garbled code) to a base64 string, the proper definition should be converting binary file to base64.

Below is the answer, thanks to @DaTebe and a reference answer from:

Retrieving binary file content using Javascript, base64 encode it and reverse-decode it using Python

The answer,

First, write two methods for the conversion from the referenced answer

function base64Encode(str) {
    var CHARS = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/";
    var out = "", i = 0, len = str.length, c1, c2, c3;
    while (i < len) {
        c1 = str.charCodeAt(i++) & 0xff;
        if (i == len) {
            out += CHARS.charAt(c1 >> 2);
            out += CHARS.charAt((c1 & 0x3) << 4);
            out += "==";
            break;
        }
        c2 = str.charCodeAt(i++);
        if (i == len) {
            out += CHARS.charAt(c1 >> 2);
            out += CHARS.charAt(((c1 & 0x3)<< 4) | ((c2 & 0xF0) >> 4));
            out += CHARS.charAt((c2 & 0xF) << 2);
            out += "=";
            break;
        }
        c3 = str.charCodeAt(i++);
        out += CHARS.charAt(c1 >> 2);
        out += CHARS.charAt(((c1 & 0x3) << 4) | ((c2 & 0xF0) >> 4));
        out += CHARS.charAt(((c2 & 0xF) << 2) | ((c3 & 0xC0) >> 6));
        out += CHARS.charAt(c3 & 0x3F);
    }
    return out;
}

function getBinary(file){
    var xhr = new XMLHttpRequest();
    xhr.open("GET", file, false);
    xhr.overrideMimeType("text/plain; charset=x-user-defined");
    xhr.send(null);
    return xhr.responseText;
}

To use it, just go with:

var b = getBinary('path/to/pdfFile.pdf');
var b64 = base64Encode(b);
console.log(b64);

Ajax call to return PDF file as base64 string

1 Answers1

Linked