title: JavaScript Blob returning broken PDF
body: <p>I want to download <em>PDF</em> document with <em>JavaScript</em> and using <em>blob</em> as described <a href="https://stackoverflow.com/questions/19327749/javascript-blob-filename-without-link">here</a>. If I download my PDF directly without <em>JS</em>, I receive a working <em>PDF</em>, but if I download it with <em>JavaScript</em> by using <em>blob</em> I cannot open my <em>PDF</em>. I tested it on <em>Mozilla Firefox 68.0.2 (64-Bit)</em> and <em>Google Chrome 76.0.3809.132 (Official Build) (64-Bit)</em> and it didn't work.</p>
  
  <p>I tested different <em>Content-Type</em> headers, but wasn't able to resolve that issue. I tested with:</p>
  
  <ul>
  <li>text/plain</li>
  <li>text/html</li>
  <li>data:attachment/text</li>
  <li>application/pdf</li>
  </ul>
  
  <p>My test server is returning those headers:</p>
  
  <pre><code>HTTP/1.1 200 OK
  Content-Disposition: attachment;filename=document.pdf
  Content-Type: application/pdf
  Content-Length: 577479
  </code></pre>
  
  <p>I tried also to set encoding to <em>UTF8</em>, but the result was the same.</p>
  
  <p>I'm requesting it with <em>AJAX</em> (maybe problem is somewhere here?) and I'm using <em>jQuery v3.3.1</em>.</p>
  
  <pre><code>$.ajax({
      type    : "GET",
      url     : pdfDownloadURL,
      async   : true,
      success : function(blob) {
  
          var contentType = "attachment/pdf";
  
          try {
              var blob =  new Blob([blob], {type: contentType});
          } catch (e) {
              // The BlobBuilder API has been deprecated in favour of Blob, but older
              // browsers don't know about the Blob constructor
              // IE10 also supports BlobBuilder, but since the `Blob` constructor
              //  also works, there's no need to add `MSBlobBuilder`.
              var BlobBuilder = window.WebKitBlobBuilder || window.MozBlobBuilder;
              var bb = new BlobBuilder();
              bb.append(blob);
              var blob =  bb.getBlob(contentType);
          }
  
          var link = document.createElement('a');
          link.href = window.URL.createObjectURL(blob);
          link.target = "_blank";
          link.style = "display: none";
          link.download = "document2.pdf";
          document.body.appendChild(link);
          link.click();
      },
  
      // ...
  
  });
  </code></pre>
  
  <p><strong>document1.pdf</strong> (<em>downloaded directly</em>)</p>
  
  <p><a href="https://i.stack.imgur.com/zH7wK.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/zH7wK.png" alt="document1.pdf is fine"></a></p>
  
  <p><strong>document2.pdf</strong> (<em>downloaded using JavaScript blob method</em>)</p>
  
  <p><a href="https://i.stack.imgur.com/U8ql0.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/U8ql0.png" alt="document2.pdf is broken"></a></p>
  
  <p>I checked requests with <a href="https://www.telerik.com/fiddler" rel="nofollow noreferrer">sniffing tool fiddler</a> and server is returning always the same document, so the problem must be somewhere in my <em>JavaScript</em> part. As you can see in the red boxes - those bytes are the same, but then we have diffetent bytes, but I saw that server returned in both cases the same document, so this problem is only on the <em>client side</em>.</p>
  
  <ul>
  <li>Size of <em>document1.pdf</em> (OK): <code>577.479</code> bytes</li>
  <li>Size of <em>document2.pdf</em> (broken): <code>1.034.166</code> bytes</li>
  </ul>
  
  <p>Then I try to open <em>document2.pdf</em> with <em>google chrome 76.0.3809.132, 64-Bit</em> and it fails.</p>
  
  <p><a href="https://i.stack.imgur.com/OseIB.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/OseIB.png" alt="google chrome PDF viewer"></a></p>
  
  <p>Is there a problem with my version of <em>jQuery</em> (in that <em>AJAX</em> part)?</p>