Menu
My problem is related to displaying base64-encoded PDF file data in Chrome browser. The PDF files are not static physical files rather they are streams converted to base64-encoded data. It is a single page application using Node.js backend. The pdf file is displayed in a modal popup box, instead of a new tab or window. The code responsible for displaying the base64-encoded PDF data is given below:
var objbuilder = '';
objbuilder += ('<object width="100%" height="100%" data="data:application/pdf;base64,');
objbuilder += (r.response);
objbuilder += ('" type="application/pdf" class="internal">');
objbuilder += ('</object>');
var html = '';
html += '<div class="modal fade in" id="linkedDoc" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">';
html += '<div class="modal-dialog">';
html += '<div class="modal-content" style="height:800px;width:600px;">';
html += '<div class="modal-body" style="height: 100%;" id = "linkedBody">';
html += '<div style="height:25px;clear:both;display:block;">';
html += '<a class="controls previous" href="javascript:void(0);" data-dismiss="modal" aria-hidden="true">Close</a>';
html += '</div></div></div></div></div>';
$('#linkedDoc').remove();
$('body').append(html);
$('#linkedBody').append(objbuilder);
$('.modal').modal({
keyboard: false,
show: true
});
$('.modal-dialog').draggable({
handle: ".modal-header"
});
$('.modal-content').resizable();
$('#linkedBody').on('show.bs.modal', function () {
$(this).find('.modal-body').css({
'max-height': '100%',
'max-width': '100%'
});
});
The approach works well for file with almost 1 MB file size but not more than that. Some of the files I want to display are 5 MBs and some are even 10 MBs. How can I fix this issue. This and This SO questions are relevant to the topic but not specific for my situation.
I can't use HTML 'embed' and 'iframe' tags because they need a physical file as their 'src' attribute but I don't have a physical PDF file rather its in-memory data.
777
Is there any limitation in Javascrip to open the base64 encoded pdf files if the size is more than 1MB? There indeed seems to be a limit on both Chrome's pdf reader plugin and Mozilla's pdf.js (used by Firefox) as to the size of pdf documents loaded by a data-URI.
Know file size with a base64 string. Very roughly, the final size of Base64-encoded binary data is equal to 1.37 times the original data size + 814 bytes (for headers). You can use ContentLength property of the request to determine what the size is in bytes, although if you are uploading more then one image, it might be trickier.
If you are looking for the reverse process, check Base64 to PDF. Choose the source of PDF file from the “Datatype” field. Paste the URL or select a PDF file from your computer. If necessary, select the desired output format. Press the “Encode PDF to Base64” button. Download or copy the result from the “Base64” field.
“ Base64 is a group of binary-to-text encoding schemes that represent binary data (more specifically, a sequence of 8-bit bytes) in an ASCII string format by translating the data into a radix -64 representation.” -Wikipedia So I had to calculate the size of the file represented by the base64 string and apply some business logic.
Anyone stumbling upon this question in future, I fixed it using blob:URL technique. THIS StackOverflow question guided me towards the solution. So instead of opening the PDF file in HTML object element, I opened it in a new window using Blob URL. It could not be achieved using data:URL after Chrome version 60 update in which they blocked data URLs.
146
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
