Setting the src attribute of an IFrame to data:application/pdf;base64?

Setting the src attribute of an IFrame to data:application/pdf;base64, isn’t working for me, any ideas why?

Here’s the .aspx markup

<%@ Page Language="C#" AutoEventWireup="true"  CodeFile="Default.aspx.cs" Inherits="_Default" %>

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Untitled Page</title>
    <script type="text/javascript">
        function loadIFrameFromHiddenField()
        {         
            //get the node containing the base64 pdf data from the xml in the hidden field
            var xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
            xmlDoc.loadXML(document.getElementById("pdfData").value);                    
            xmlDoc.setProperty('SelectionLanguage', 'XPath');
            var pdfDataNode = xmlDoc.selectSingleNode("//PDF");

            //if we've got the node
            if (pdfDataNode != null) 
            {
                //get the data and append it to the src contents 
                var pdfIFrameSrc = "data:application/pdf;base64," + pdfDataNode.text;
                //set the src attribute
                document.getElementById("pdfIFrame").setAttribute("src", pdfIFrameSrc);
            }            
        }
    </script>
</head>
<body>
    <form id="form1" runat="server" style="width:100%;height:100%;">
        <asp:HiddenField ID="pdfData" runat="server" /> 
        <div style="width:100%;height:80%;"> 
            <iframe id="pdfIFrame" runat="server" scrolling="auto" frameborder="0" marginheight="0" marginwidth="0" style="height:99.5%;width:99.5%" />            
        </div>
    </form>
</body>
</html>

and here’s the code behind:

using System;
using System.Data;
using System.Configuration;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
using System.IO;
using System.Text;
using System.Xml;
public partial class _Default : System.Web.UI.Page 
{
    protected void Page_Load(object sender, EventArgs e)
    {

        //get the bytes from our PDF
        Byte[] pdfBytes = File.ReadAllBytes("c:\\temp\\Test.pdf");

        //build xml containiing our base64 encoded pdf data and put it in hidden field
        pdfData.Value = buildDocumentXML(pdfBytes, "TestDoc");

        //call js function to add the src to the iframe
        String scriptText = "<script type='text/javascript'>loadIFrameFromHiddenField()</script>";
        ClientScript.RegisterStartupScript(this.GetType(), "loadIFrameFromHiddenField", scriptText);
    }

    private string buildDocumentXML(Byte[] pdfBytes, string documentName) 
    {

        StringBuilder documentsString = new StringBuilder();
        XmlWriterSettings documentsXmlSettings = new XmlWriterSettings();

        documentsXmlSettings.Indent = false;            
        documentsXmlSettings.OmitXmlDeclaration = true;
        documentsXmlSettings.ConformanceLevel = ConformanceLevel.Fragment;
        documentsXmlSettings.NewLineHandling = NewLineHandling.None;

        using (XmlWriter documentsXmlWriter = XmlWriter.Create(documentsString, documentsXmlSettings))
        {

            documentsXmlWriter.WriteStartElement("DOCUMENTS");

            documentsXmlWriter.WriteStartElement("FILENAME");
            documentsXmlWriter.WriteString(documentName);
            documentsXmlWriter.WriteEndElement();

            documentsXmlWriter.WriteStartElement("PDF");


            documentsXmlWriter.WriteBase64(pdfBytes, 0, pdfBytes.Length);


            documentsXmlWriter.WriteEndElement();



            documentsXmlWriter.WriteEndElement();
        }



        return documentsString.ToString();

    }

}

I should say unlike in this example, in the real app, the pdf data is generated serverside. The reason I’m trying to load the pdf data clientside is I have to have the pdf byte data clientside anyway to do something else with and I’m trying to reduce instances of this data being generated and chucked around.

Just stick the above code and markup into a simple one page website in VS2005 and stick any old pdf in c:\temp\, call it TestDoc.pdf and it should compile and run.

Basically the behaviour I’m getting is nothing in the iframe at all.

I’m using IE7 so that might be a problem. I don’t know since there’s precious little information about using the data:application/pdf;base64[base64 data] syntax around.

Here is Solutions:

We have many solutions to this problem, But we recommend you to use the first solution because it is tested & true solution that will 100% work for you.

Solution 1

It may be tacky to reference wikipedia, but Wikipdia says that there may be some restrictions on which filestypes you are allowed to use the data:filetype;base64 syntax on. Namely, only pictures for now. The IE9 spec, the article says, allows for broader use, but I’m not sure what exactly that entails. In the meantime, you’ll just have to use the .pdf file and not just it’s base 64 string data.

Solution 2

this way worked for me :

var oldsrc = $('.content-control-iframe').attr('src');
var newsrc = $('.content-control-iframe').attr('src').slice(8);
$('.content-control-iframe[src="'+oldsrc+'"]').attr('src', newsrc);

Solution 3

As far as I know, IE doesn’t handle the data: URL scheme at all, so I guess, it doesn’t know what to pass to the PDF viewer. See WP.

Cheers,

Note: Use and implement solution 1 because this method fully tested our system.
Thank you 🙂

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply