Display a pdf file in the browser with sails

Question

I have some documents in a directory and I want to show one embedded in the browser, I save the path of the document in a table and I can read the path from that table and download the document, but I can't figure out how to show the file in the browser. I'm using the following code to send the file:

  loadDocument: async function (req,res){

  var SkipperDisk = require('skipper-disk');
  var fileAdapter = SkipperDisk(/* optional opts */);

  var fd = await Documents.find(
      {
        where: {id:'1'},
        select: ['uploadFileFd']
      }
  ).limit(1);

  let uploadFileFd = fd[0]["uploadFileFd"];

  var fileStream = fileAdapter.read(uploadFileFd);

  fileStream.on('error', function (err){
    return res.serverError(err);
  });

  res.contentType("application/pdf");

  res.set("Content-disposition", "attachment; filename=" + "file"+ fd[0]["id"]+".pdf");

  fileStream.pipe(res);

  },

I want to call the function and load the pdf file in the browser, preferably without reloading all the page.

Really depends what you want for the user. You could open the PDF in a new tab when a button is clicked, calling something like `www.example.com/loaddocument/foobar` as the href of an anchor tag, combine that with target _blank for a new tab or without to replace the current content or you could put the PDF into an embed tag, an iframe to be old school. Loads of options. — Glen, Aug 14 '19 at 19:32
In that case, you are looking for PDF.js my friend. Online demo: http://mozilla.github.com/pdf.js/web/viewer.html GitHub: https://github.com/mozilla/pdf.js — Glen, Aug 14 '19 at 20:18
I have some pdf files in my server, I want to show them in the browser according to the options that the user gave me, currently I take that options and I download the file, what I want instead of download the file is to show it in the browser — dilver, Aug 14 '19 at 21:59
OK, embed will still do this for you. So what you would to do is write a small bit of JavaScript on the client side, that puts the options into a request string, then create an embed tag that uses the full url including the request parameters as the src. Then the embed tag will display that pdf. — Glen, Aug 14 '19 at 22:03
So your src would be something like http://example.com/loaddocument?option1=foo&option2=bar take a look at this https://stackoverflow.com/questions/6646413/how-to-change-the-value-of-embed-src-with-javascript then to see how you would change or update the embed tag. — Glen, Aug 14 '19 at 22:07

score 0 · Answer 1 · answered Aug 19 '19 at 06:58

Clients browsers will download the pdf without trying to open the built-in PDF viewer (ie, Chrome) because of the Content-disposition: attachment header that you're sending - try using inline instead.

https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Disposition

res.setHeader('Content-type', 'application/pdf');
res.setHeader('Content-disposition', 'inline; filename="file' + fd[0]["id"] + '.pdf"');

dilver · Accepted Answer · 2020-03-01T14:54:23.140

I found a solution to my problem. First I have to create a way to serve the static folder where the files are located, I found the answer here.

Then I modify the code to send the data encoded as base64 using 'base64-stream':

      var readStream = fs.createReadStream(uploadFileFd);
      readStream.on('open', function () {
          readStream.pipe(new Base64Encode()).pipe(res);
      });
      readStream.on('error', function(err) {
        res.end(err);
      });

Finally I show the pdf file in the browser as follows:

     .done(function(data){
          var parent = $('embed#pdf').parent();
          var newElement = "<embed src=data:application/pdf;base64,"+data+" id='pdf' width='100%' height='1200'>";
          $('embed#pdf').remove();
          parent.append(newElement);
        })

Now I can display a pdf file in the browser embedded in my own page, thanks to all the people that try to help.

Display a pdf file in the browser with sails

2 Answers2