31

I need to encode a PDF file to Base64 with Javascript. I can create Base64-encoded jpeg or png images in Javascript, but I could not find any way or sample code to create a Base64-encoded string from a PDF file.

Is it there any solution using a HTML5 canvas?

Thanks.

2
  • 1
    stackoverflow.com/questions/12092633/… and .window.open("data:application/pdf;base64," + Base64.encode(out)); Nov 24, 2012 at 6:16
  • STOP! don't use base64 anymore. there are better ways to handle binary data. like using ObjectURLs, blobs and typed arrays. open(URL.createObjectURL(file))
    – Endless
    Sep 8, 2023 at 19:07

3 Answers 3

42

Try this :-

<input id="inputFile" type="file" onchange="convertToBase64();" />

<script type="text/javascript">
    function convertToBase64() {
        //Read File
        var selectedFile = document.getElementById("inputFile").files;
        //Check File is not Empty
        if (selectedFile.length > 0) {
            // Select the very first file from list
            var fileToLoad = selectedFile[0];
            // FileReader function for read the file.
            var fileReader = new FileReader();
            var base64;
            // Onload of file read the file content
            fileReader.onload = function(fileLoadedEvent) {
                base64 = fileLoadedEvent.target.result;
                // Print data in console
                console.log(base64);
            };
            // Convert data to base64
            fileReader.readAsDataURL(fileToLoad);
        }
    }
</script>

1
  • This solution works great across browsers and filetypes
    – AJ Zane
    Jul 5, 2016 at 17:49
2

Here is how one person did it:

Here is a link that suggests several other possible solutions:

3
  • i saw this link before and gave it a try after you adviced this link too blogs.adobe.com/formfeed/2009/08/… this one works for txt files but not for pdf. when i write var inputStream = event.target.getDataObjectContents("1.pdf"); document.getElementById('data2').value = inputStream; it does not return any value. Also the second link that you shared does not contain anything about pdf to string conversion. It shows about base64 encoding only and i have no problem with base64 encoding an image or a string.
    – onuryilmaz
    Nov 24, 2012 at 7:22
  • 1
    My point is to get the base64 encoded string representation of a pdf file.
    – onuryilmaz
    Nov 24, 2012 at 7:26
  • @onuryilmaz have you found the answer ? I have the same problem. May 22, 2015 at 9:31
-1

     function Selectfile() {
        document.getElementById('fileInput').click();
    };

     function handleFileSelect (event) {
        var selectedFile = event.target.files[0];
        if (selectedFile) {
            var reader = new FileReader();
            reader.onload = function (event) {
            
                    var selectedFile = selectedFile;
                    // Convert the file to Base64
                    var selectedFileBase64 = event.target.result.split(',')[1];
                    console.log(selectedFileBase64);
               
            };
            reader.readAsDataURL(selectedFile);
        }
    };
    document.getElementById('fileInput').addEventListener('change', handleFileSelect);
<button onclick="Selectfile()">Browse</button>

<input type="file" id="fileInput" style="display: none;"/>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.