title: Render a PDF using Javascript from an Ajax call
body: <p>I have a very simple problem but unfortunately could not find a solution to it. I noticed on Stack Overflow there are many similar issues but none of them matches my problem completely.</p>
  
  <p>I have an api server built on node and hapi which returns me a generated pdf file:</p>
  
  <pre><code>reply.file("./" + cfg.docRawFolder + "/" + doc._id + ".pdf");
  </code></pre>
  
  <p>This works fine.
  Now I have a web server also on hapi and would like to contact the pdf endpoint on the api server using jquery and ajax:</p>
  
  <pre><code>$.ajax({
            url: url,
            crossDomain: true,
            type:"GET",
            headers: {
              'Authorization': token1,
              'userid': userid,
              'deviceuid': deviceuid
            }
           }).done(function(data, textStatus, XMLHttpRequest) {
                    // some magic
           }).fail(function(err) {
              alert(JSON.stringify(err));
          });
  </code></pre>
  
  <p>The furthest I came is to get the returned garbage:</p>
  
  <pre><code>%PDF-1.5 %���� 1 0 obj &lt;&gt; endobj 2 0 obj &lt;&gt; endobj 3 0 obj &lt;&gt;/ProcSet[/PDF/Text/ImageB/ImageC/ImageI] &gt;&gt;/MediaBox[ 0 0 595.32 841.92] /Contents 4 0 R/Group&lt;&gt;/Tabs/S&gt;&gt; endobj 4 0 obj &lt;&gt; stream x�s ���w3T04��30SI��2T0BCs=#3K=#��\^.�t�����TY��X������ 4�)����B��Yo���P{L̍��M�jC�s+�p� t��1�zd�C)� endstream endobj 5 0 obj &lt;&gt; endobj 6 0 obj &lt;&gt; endobj 7 0 obj &lt;&gt; endobj 8 0 obj [ 226 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 487 0 0 0 0 0 468 0 0 0 0 0 0 479 525 0 0 0 0 0 0 0 0 0 230 799 525 527 0 0 0 391 0 0 0 715 0 453] endobj 9 0 obj &lt;&gt; stream x��}x�U��9�;-S2%3�$�df2�$�� �C%�jB �)��bY{Y���2@����������� ۪�H��~�gm��ww�����I���������3��c.�hؤʺ1�����l&amp;�u=c)oW�WN�6����5�1� ...
  </code></pre>
  
  <p>displayed in the same window using:</p>
  
  <pre><code>document.open();
  document.write(data);
  document.close();
  </code></pre>
  
  <p>or popup by adding this to the ajax call:</p>
  
  <pre><code>dataType: "application/pdf"
  </code></pre>
  
  <p>Regardless what I do I always get this garbage displayed.</p>
  
  <p>What I don't want to do:</p>
  
  <ol>
  <li>Expose pdfs as links on the api server</li>
  <li>Create a route on the web server to download and store the pdf from
  the api server and expose a link.</li>
  </ol>
  
  <p>What I have to do:</p>
  
  <ol>
  <li>For the GET request pass 3 custom headers: the userid, deviceuid and
  Authorization, so I have to use ajax, no forms or iframes.</li>
  </ol>
  
  <p>Ideally what I would like to achieve:</p>
  
  <ol>
  <li>Display the pdf stream as a document in a lightbox or just dislpay it
  no matter how, but not in garbage format. I know the returned
  garbage works fine as I can display the pdf correctly on Android.</li>
  </ol>
  
  <p>Many thanks in advance
  Z</p>