Member Avatar for cguan_77

I have a large pdf (>1 MB)that i want to preload on a html page that says "Please wait..." and display that at the middle of the screen.. so that users know that the pdf is loading (i know it says it at the bottom of the screen, but i'm worried they might not see that). How can i preload a pdf in an html page and then have it display?

or how to embed a pdf file using html or any language? thank you for any ideas.

  • 4 Contributors
  • 6 Replies
  • 1K Views
  • 2 Days Discussion Span
  • Latest Post Latest Post by almostbob

Dani AI

Generated

A reliable, modern solution is to fetch the PDF with JavaScript, show a centered "Please wait..." overlay (with optional progress), then display the file by assigning a Blob URL to an <iframe> or <object>. This respects 's note that JS is needed, acknowledges 's iframe/meta suggestions and 's preload hack, and replaces brittle hacks with explicit download control and progress feedback.

Example (streaming progress -> blob -> iframe):

// elements: #overlay (centered message), #progress (text), <iframe id="pdf">
fetch('/path/to/doc.pdf').then(res => {
  const len = res.headers.get('Content-Length');
  if (!res.body) return res.blob().then(b => {
    document.getElementById('pdf').src = URL.createObjectURL(b);
    document.getElementById('overlay').style.display = 'none';
  });

  const total = len ? parseInt(len,10) : 0;
  const reader = res.body.getReader();
  const chunks = [];
  let received = 0;

  return (function pump(){
    return reader.read().then(({done, value}) => {
      if (done) {
        const blob = new Blob(chunks, {type:'application/pdf'});
        const url = URL.createObjectURL(blob);
        document.getElementById('pdf').src = url;
        document.getElementById('overlay').style.display = 'none';
        // URL.revokeObjectURL(url) can be called after iframe load to free memory
        return;
      }
      chunks.push(value);
      received += value.byteLength || value.length;
      if (total) document.getElementById('progress').textContent =
        Math.round(received/total*100) + '%';
      return pump();
    });
  })();
}).catch(() => {
  // fallback: show spinner / direct link or use XHR responseType='arraybuffer'
});

Notes and cautions: cross-origin PDFs require CORS (Access-Control-Allow-Origin) and to read Content-Length the server must expose that header (Access-Control-Expose-Headers). Not all browsers support streaming; then fall back to res.blob() or XHR. Embedding via the browser PDF plugin can make load events unreliable — using a blob + iframe/object gives the most control. For richer UI and rendering control, use a library such as PDF.js.

Recommended Answers

All 6 Replies

Member Avatar for sreein1986

it is possible with JavaScript not possible in HTML, post this in JavaScript forum

Member Avatar for silviubogan

Put this in the head tag of your webpage:

<meta http-equiv="refresh" content="2;url=">

Replace "2" with the number of seconds the user will wait until he will be redirected to "pdfdoc.pdf" (replace it with your pdf file's path).

You may also use a hidden iframe with the pdf file which will load while the "Loading..." text will be shown to the user. After it is loaded you can make the iframe visible using javascript.

Member Avatar for cguan_77

i did a search using iframe..for javascript..but there's a lot complaining that their system were injected by a malicious code because of using such method.. any comments for this?

or is there a way to detect if the file has downloaded completely? thank you.

Member Avatar for almostbob

It is possible, preferable?, to actually preload the .pdf file so that the impression of instant loading is given.
in the page prior to the pdf linked page add a preload script

<script language="javascript" type="text/javascript">
//<![CDATA[
<!-- 
image1 = new Image();
image1.src = "";
//-->
//]]>
</script>

The code above placed between </body> and </html> in the page containing the link to the .pdf file (or html file with the .pdf in it) instructs the browser to download the pdf file to the browser cache, but just leave it there.
(filetype is irelevant image() is convenient, use the same script for any filetype as it is not ever going to be rendered)
the download happens after the page is fully rendered so does not delay the current page.
on clicking the link to the .pdf file (or html page) the browser finds the .pdf in the browser cache and does not download it, but displays from the cache, at apparently blinding download speeds.In browsers with javascript disabled, the function degrades gracefully

Member Avatar for cguan_77

thanks almostbob, i'll try it out...

Member Avatar for almostbob

hope it works for you
I use the script to load large images of the inpage thumbnails so the fullsize image changes instalntly on mouseclick
+ have some instructional .pdfs load so they open onclick

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.