1

I'm using Knockout Kendo data-binding to get get base64 pdf string from backend and I'm trying to display the base64 string in Object tag and embed tag to display in all browsers but it's not working in IE. Can anybody help me displaying base64 pdf url string in IE . The syntax : 

this.pdfData = ko.computed(function () {
            var pData = this.pData();

            if (pdata) {
                // get pdf data here

                var bob =  'data:application/pdf;base64,' + service.standard.call.payslipPdf.get(payslip).Ev_pdf;
                return bob;
                //debugger;
            }
            return '';

        }, this);
Improve this question
1
  • Interesting feature. Could you elaborate on how/why it's not working in IE? It would also help if you could extend the sample code a bit perhaps even with testdata, so we can repro the issue. (PS. You can edit your question to update it.) Commented Aug 12, 2013 at 14:42

2 Answers 2

Reset to default
1

Answer from How can I make a link in IE using base64 encoding method?:

According to this you cannot use data uri for navigation in IE.

  • Internet Explorer through version 7 (approximately 5% of web traffic as of September 2011), lacks support. However this can be overcome by serving browser specific content.[6]
  • Internet Explorer 8 limits data URIs to a maximum length of 32 KB. (Internet Explorer 9 does not have this limitation)[4][3]
  • In IE 8 and 9 data URIs can only be used for images, but not for navigation or Javascript generated file downloads. [7]
Improve this answer
Sign up to request clarification or add additional context in comments.

6 Comments

how can then one display pdf base64 url string in IE9? I can see and download pdf in all browsers except IE. I get a gray screen and with pdf string data when i debug but it doesn't display in IE. Any idea?
It isn't possible. You'll have to link to a file reference instead.
<object width="900" height="800" data-bind="attr:{data:pdfData}" type="application/pdf"><embed data-bind="attr:{src:pdfData}" type="application/pdf" width="600" height="500" /></object> "This is how I'm data-binding"
Let me make it clearer. It is impossible to do this in IE9. All the javascript in the world isn't going to change that fact. Stop, use a different approach.
which approach shall I use then in order to display PDF in my frontend by odata call
|
-1

One possibility, not exactly a clean solution, is to build something on the server which accepts a request of the base-64 and translates it into an image response.

If it's small enough, you can do it all in one big call, and just build an img tag, like:

<img src="MyHandler.ashx?img=784571348589235824...9875290347589243">

But you'll run into issues with URL limits if it's too big. You could also store the base-64 temporarily on the server and make a call to it, assuming your server can handle it. For example, using ASP.NET MVC:

[HttpPost]
public ActionResult GetImageKey(string base64) {
    var key = Guid.NewGuid();
    HttpContext.Cache.Add(key.ToString(), Convert.FromBase64String(base64), null,
        DateTime.Now.AddSeconds(30), Cache.NoSlidingExpiration, CacheItemPriority.Normal,
        null);
    return Json(new { imageKey = key.ToString() });
}

public ActionResult GetImage(string imageKey) {
    return File((byte[])HttpContext.Cache[imageKey], "image/png");
}

function go() {
    jQuery.ajax({
        url: "/Home/GetImageKey",
        type: "post",
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        data: "{'base64':'iVBORw...FNmlZSxpODv+wRj1j56bJnOiwAAAABJRU5ErkJggg=='}",
            success: function (result) {
                jQuery("#img-result").attr("src", "/Home/GetImage?imageKey=" + result.imageKey);
        }
    });
}

EDIT Just noticed the question was for PDF, not image, but the same idea should work.

Improve this answer

12 Comments

Hi Joe, I'm using MVVC, thanks for the advice but my requirements are strictly knockout kendo and odata service call. I need to bind the control in my case object to work in IE.
'data:application/pdf;base64,' + service.standard.call.payslipPdf.get(payslip).Ev_pdf; this call gets me pdf base64 string data joe
Then if the older IE browsers can't do what you're trying using normal techniques, you may just be out of luck. This solution is a huge hack and uses a lot of bandwidth and resources, but it is usable across browsers, even older ones. Just one of those things you have to think about when targeting older browsers - a lot of new cool stuff can't be done without workarounds, so your choices are generally to either require new browsers, or do the ugly workarounds.
Hi Joe thanks for your reply, also the example you gave me above can I use it as a reference for PDF and I need to data-bind my object tag and embed tag to display pdf result
Yeah, you should be able to use most of this - the only real differences are going to be what you do with the URL when you get it back from the AJAX call, and the MIME type when you send the bytes from the server. I haven't dealt with PDF rendering, but I'm assuming you'd just bind the URL to a src or href or something like that.
|

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.