29

How do I open PDF document in new browser window?

The window should be full and withouth menu.

Just a PDF document in a clean full window with native Javascript or jQuery.

pb2q
  • 58,613
  • 19
  • 146
  • 147
mojeime
  • 353
  • 1
  • 5
  • 11
  • 10
    I am not treating them like misbehaving children I am giving them a options. It is a document management app with few icons that open pdf in different ways. One of the icons will be full browser window, others are for download, view in dialog, view with form for editing on the side,...so way are you judging and treating me like misbehaving children? – mojeime Jan 19 '11 at 14:05
  • 2
    @Ed Guiness: You should open your eyes. In our intranet there are some people that are viewing houndreds of document a day and they hate to choose every time to open it in a browser, download it on comp or in a app or whatever. We have a lot of users that have, imagine that, 2 monitors and like to view document in one and on the other edit the form about that document. Is this strange? – mojeime Jan 19 '11 at 14:32

4 Answers4

65
<a href="#" onclick="window.open('MyPDF.pdf', '_blank', 'fullscreen=yes'); return false;">MyPDF</a>

The above link will open the PDF in full screen mode, that's the best you can achieve.

Shadow The GPT Wizard
  • 66,030
  • 26
  • 140
  • 208
  • 8
    You are the only that answered my question without judging me for what i am about to do with fullscreen pdf. And i know,.. i know what i'm doing here :) But since it is just one of the views user can choose and if google does it...i guess i can't be that wrong about it. Right:) Thank You. – mojeime Jan 19 '11 at 14:19
  • @moj I rarely judge other people as I'm aware that usually there are good reasons, for example client demands such feature. Glad I could help! :) – Shadow The GPT Wizard Jan 19 '11 at 15:32
  • @ykaragol not working means nothing is opened at all, or not full screen? Looks like Firefox simply does not support opening anything in full screen. – Shadow The GPT Wizard Apr 05 '16 at 14:22
  • just fullscreen is not working. I think firefox not supporting. – ykaragol Apr 05 '16 at 14:39
  • 1
    @ykaragol [true](https://developer.mozilla.org/en-US/docs/Web/API/Window/open): "Do not use. Not implemented in Mozilla. There are no plans to implement this feature in Mozilla." – Shadow The GPT Wizard Apr 05 '16 at 14:45
  • Question - window.open("pdf link") taking too much time to load. I want to show loader before open this window & when window open it have to show pdf quickly. @ShadowWizardisEarForYou – rohit Mar 02 '20 at 05:42
  • @rohit should be the same as https://stackoverflow.com/questions/14219755/show-loading-message-while-loading-contents-in-asp-using-jquery-ajax/14233194#14233194 – Shadow The GPT Wizard Mar 02 '20 at 08:28
6
var pdf = MyPdf.pdf;
window.open(pdf);

This will open the pdf document in a full window from JavaScript

A function to open windows would look like this:

function openPDF(pdf){
  window.open(pdf);
  return false;
}
BlackMagic
  • 4,378
  • 1
  • 21
  • 14
1

I'm going to take a chance here and actually advise against this. I suspect that people wanting to view your PDFs will already have their viewers set up the way they want, and will not take kindly to you taking that choice away from them :-)

Why not just stream down the content with the correct content specifier?

That way, newbies will get whatever their browser developer has a a useful default, and those of us that know how to configure such things will see it as we want to.

paxdiablo
  • 854,327
  • 234
  • 1,573
  • 1,953
  • 1
    I have my reasons. This will be just one of possible views in my doc management app. – mojeime Jan 19 '11 at 14:06
  • No probs, @mojeime, now that you've clarified the requirements, I'll mark this answer CW since it's not as useful as I first thought :-) Good luck finding a solution. – paxdiablo Jan 19 '11 at 14:12
  • Thank you. Answer from @Shadow Wizard works OK i just want to here some more opinions before accepting the answer. – mojeime Jan 19 '11 at 14:18
1

To download from from a Base64 encoding you can use the following function:

function base64ToArrayBuffer(data) {
  const bString = window.atob(data);
  const bLength = bString.length;
  const bytes = new Uint8Array(bLength);
  for (let i = 0; i < bLength; i++) {
      bytes[i] = bString.charCodeAt(i);
  }
  return bytes;
}
function base64toPDF(base64EncodedData, fileName = 'file') {
  const bufferArray = base64ToArrayBuffer(base64EncodedData);
  const blobStore = new Blob([bufferArray], { type: 'application/pdf' });
  if (window.navigator && window.navigator.msSaveOrOpenBlob) {
      window.navigator.msSaveOrOpenBlob(blobStore);
      return;
  }
  const data = window.URL.createObjectURL(blobStore);
  const link = document.createElement('a');
  document.body.appendChild(link);
  link.href = data;
  link.download = `${fileName}.pdf`;
  link.click();
  window.URL.revokeObjectURL(data);
  link.remove();
}

EDIT: I misread the question and had created it for downloading. Leaving the function here since it might still be useful

Kevin Danikowski
  • 4,620
  • 6
  • 41
  • 75