title: How can a pdf be served from the browser and referenced by <object> data attribute?
body: <p>How can a pdf be served from the browser so that it can be referenced from an object tag's data attribute? The point is to try another uri scheme - such as filesystem: or blob: - other than data: which does not allow fragment identifiers like (#zoom=50). The server returns base 64 binary data which requires using the data uri to display. I've tried appending the display parameter #zoom=50 but <a href="https://code.google.com/p/chromium/issues/detail?id=123004" rel="nofollow">Chrome doesn't parse out this option</a> when using data uri like it does for a url. I'm not able to make changes to the server and Chrome 45 must be supported. </p>
  
  <p><strong>Data:uri which will not parse fragment identifiers</strong></p>
  
  <pre><code>&lt;object type="application/pdf" ng-attr-data="{{'data:application/pdf;base64,' + itemGraphUrl}}"&gt;&lt;/object&gt;
  </code></pre>
  
  <p><strong>alternative data schemes I've tried (filesystem: and blob:)</strong></p>
  
  <pre><code>&lt;object type="application/pdf" ng-attr-data="{{fsGraphUrl + '#zoom=50'}}"&gt;
  
  
              window.requestFileSystem  = window.requestFileSystem || window.webkitRequestFileSystem;
              window.requestFileSystem(window.TEMPORARY, 8*1024*1024, onInitFs, errorHandler);
  
              function onInitFs(fs){
                  fs.root.getFile('graph.pdf', {create: true, exclusive: false}, function(fileEntry){
                      // Create a FileWriter object for our FileEntry (log.txt).
                      fileEntry.createWriter(function(fileWriter) {
  
                          fileWriter.onwriteend = function (e) {
  //                          $scope.fsGraphUrl = url.replace("filesystem:", "filesystem:application/pdf;base64,");
                              $scope.fsGraphUrl = true ? fileEntryURL : objectURL;
                              $scope.$apply();
                          };
  
                          fileWriter.onerror = function (e) {
                              console.log('Write failed: ' + e.toString());
                          };
  
                          // Create a new Blob and write it to log.txt.
                          var blob = new Blob([pdfData], {type: 'application/pdf'});
                          var objectURL = URL.createObjectURL(blob);
                          var fileEntryURL = fileEntry.toURL();
  
                          console.log('URL.createObjectURL is ' + objectURL); //'blob:http%3A//localhost%3A3000/80d971a2-6f49-4e0f-9266-0746ebc66598'
                          console.log('fileEntry.toURL is ' + fileEntry.toURL()); //'filesystem:http://localhost:3000/temporary/graph.pdf'
  
                          fileWriter.write(blob);
  
                      }, errorHandler);
  
                  }, errorHandler);
  </code></pre>
  
  <p>Both the createObjectURL and toURL seems close to be close to working but I get the Chrome message "Failed to Load PDF Document". This is the same message I get for the data uri if I don't include "data:application/pdf;base64," Is there some way to use filesystem: or blob: and specific "application/pdf;base64," in the same way?</p>