CODEWITHSUNDEEP
javascripthtmlgoogle-chromepdf
ITExpert
ITExpert

Reputation: 323

File size issue in Chrome for base64-encoded PDF data in OBJECT tag

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.

Upvotes: 8

Views: 15036

Answers (2)

ITExpert
ITExpert

Reputation: 323

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.

Upvotes: 5

Raman Kumar
Raman Kumar

Reputation: 129

First Approach

Can you try with iframe tag instead of object tag.

Second Approach

can you provide the link for PDF instead of actual data.

you can create the pdf file and store in some where then after provide the link to object tag.

Third You can try Embed tag also

May be Solve your issue :)

Upvotes: 1

Related Questions