Displaying Blob PDF in Edge/IE11
<p>I have a django app (from which I get some html as a client), and a base64-encoded PDF which needs to be displayed. I've tried multiple approaches, which work as expected in Chrome/Firefox.</p>
<p>I'm working with django, so there will be some templates and some JavaScript.</p>
<p><em><code>pdf_preview_embed</code> is a div</em></p>
<h3>Embed DataURL</h3>
<pre class="lang-html prettyprint-override"><code>&lt;embed width=100% height=100% type=&quot;application/pdf&quot; src=&quot;data:application/pdf;base64, {{ pdf }}&quot;&gt;&lt;/embed&gt;
</code></pre>
<p>Unacceptable solution, because it may require inlining megs of data. Works in IE11 under Windows 7, doesn't work on Edge and IE11 under Windows 10.</p>
<h3>Embed Blob</h3>
<p><a href="https://github.com/danguer/blog-examples/blob/master/js/base64-binary.js" rel="noreferrer">base64binary implementation</a></p>

<pre class="lang-js prettyprint-override"><code>var blob = new Blob( [Base64Binary.decode(pdf)], {'type': 'application/pdf'} );
pdfURL = URL.createObjectURL( blob );
$('#pdf_preview_embed').html(
    '&lt;embed width=100% height=100% type=&quot;application/pdf&quot; src=&quot;'+pdfURL+'&quot;&gt;&lt;/embed&gt;'
);
</code></pre>
<p>Also does not work in Edge and IE11.</p>
<h3>&lt;iframe&gt; Blob</h3>
<pre class="lang-js prettyprint-override"><code>$('#pdf_preview_embed').html(
    '&lt;iframe src=&quot;'+pdfURL+'&quot; style=&quot;width: 100%; height: 100%;&quot; frameborder=&quot;0&quot; scrolling=&quot;no&quot;&gt;&lt;/iframe&gt;'
);
</code></pre>
<p>Edge claims it can't open pdf, and IE11 doesn't show anything.</p>
<h3>Actually using pdf.js to display the pdf</h3>
<p>Now here something happens: I found out the blob url origin is <code>null</code>, instead of the application for Edge and IE11, causing pdf.js to refuse opening it. Server CORS is configured to allow all origins. I am a bit lost.</p>