In our application we have links to dynamically generated PDF documents. The links look something like this host/22-5/file_3136.pdf so to the browser it seems like a static pdf document. When link is clicked it opens a new window. That window receives PDF document only (no HTML) with headers like:
Content-Disposition: inline; filename=file_3136.pdf
Content-Type: application/pdf
We want users to be able to see the PDF in the browser if PDF plug-in is installed and to be able save the document with correct filename.
Now we want to add a loading screen that would be shown while the PDF is being generated. Whats the best way to do that, while retaining the current functionality.
One option would be to show the loading screen and then to redirect to PDF when generation is complete. This would require me to retain the PDF on the server for some time. Currently they are being deleted as soon as the response is sent.
Another option is to send some HTML and javascript (to show the loading page) with <embed>, <iframe> or <object> tag that points to the pdf on the server.
What the best approach? What works with most browsers?
On download sites, I often see an additional (small) window pop up. I believe that window acts as a "choreographer" to control what displays on the main page while also firing off a redirect to the download file.
HTML redirects. You create a page that redirects "to itself" every few seconds. When the PDF is done, you generate a redirect to that instead.
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:
<img id="pdfLoader" src="preloader.jpg"/>
You can get a preloader image from ajaxload.info
<script language="javascript" type="text/javascript">
//<![CDATA[
<!--
var pdfLoader = document.getElementById("pdfLoader");
pdfLoader.src = "http://mysite.com/mypdf.pdf";
//-->
//]]>
</script>
The code above placed between and 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
If you linearize the PDf you can also display the first page very quickly. I wrote 2 articles introducing linearized PDF at http://www.jpedal.org/PDFblog/2010/11/do-i-have-to-download-the-whole-pdf-if-i-view-it-across-the-internet/ and http://www.jpedal.org/PDFblog/2010/02/linearized-pdf-files/
Related
I have zero knowledge with regard to coding. I desperately need to download a pdf file which is being shown in the fashion attached to this post. The download button is not working and I've tried everything which I can to download the file. Any help is welcome. Things which I've tried are
Finding file source in network tab under inspect element
Finding any URl leading to the pdf again in the inspect elements tab.
Saving the page as Html, upon which it downloads but never opens again with the pdf required.
Also in my limited research which I could make sense of was, the page used canvas element to render the pdf. Text of pdf is seen to be entered manually in a separate layer.
The address of the pdf being rendered is actually visible in the url on your image.
the ../../ means go up 2 directories.
So that means the absolute url for your pdf is this.
https://www.time4education.com/MoodlePages/catmttt/cat20materialvideos/VAHO1002103.pdf
I have an internal site with lots of different pages, all of them has a printable version controlled by CSS only. My users create PDFs using Chrome's Print/Save As PDF menu command. I wonder if it would be possible to use JavaScript to initiate Save As PDF from a button and automatically open the saved PDF (actually saving is not important, just viewing it on a new tab is fine).
Chrome-only solution is OK. It's also not a problem if a Chrome extension needs to be installed. Anything is fine as long as I don't have to write extra PDF rendering code for each page layout.
There is no way to force a browser to print something as a PDF, or even send a request to a printer, the best method you can do it use the print() function in JavaScript.
A way you can do this is to make it an iframe object and print it like this:
document.getElementById('content-frame').contentWindow.window.print();
That would make it send a print menu for the iFrame, printing only the content within the iFrame.
The html embed tag displays PDFs with print and download options. Depending on the setup of the page, you could append an element somewhere with the pdf source dynamically populated from a button users see beside the PDF's name.
For Example...
HTML:
<div class="parent-container">
<h3 class="pdf-name">Some PDF Name</h3><button type="button" class="open-pdf"
data-pdf="source">Open</button>
</div>
Javascript:
function displayEmbeddedPdf (event){
event.preventDefault();
let pdfSource = $(this).data("pdf");
let pdfDisplay=`<embed class="embed-responsive-item embedded-pdf"
src="https://via.placeholder.com/150#view=FitH">`
$(this).parent().append(pdfDisplay);
}
$( document ).ready(function() {
$(".open-pdf").click(displayEmbeddedPdf)
});
I've used an image placeholder in the space below, but you could instead
insert the pdfSource variable to access a source in your directory ... Also
note that the "embed-responsive-item" class on the embed tag is from with
Twitter Bootstrap and helps with the responsive formatting. Also, "#view=FitH" is an open parameter. Here's more info about open parameters: https://www.adobe.com/content/dam/acom/en/devnet/acrobat/pdfs/PDFOpenParams.pdf
See the code on this CodePen: https://codepen.io/gemiller/pen/qvyaGZ
Here's an example of what an embedded pdf looks like: https://msu.edu/~urban/sme865/resources/embedded_pdf.html
I need open PDF file from my JS code, but link in not good aproach.
I want to open this PDF in something like pdf viewer in current page.
Unfortunately, the behaviour is all down to the PDF reader software that the user has installed, so you can't control it with a simple link.
That is, the PDF reader software installed on the user's PC overrides the browser's 'download' behaviour, and does what it likes with the PDF - whether that is launching it in a separate window, or a client application.
To render it in the same window you need to instruct a PDF viewer that you control.
There are a few if you google, and the one I prefer is the open source pdf.js
Alternatively, you may be able to find an online 3rd-party viewer that you can call via a URL, passing it the link to your PDF as part of the URL.
Don't link directly to the PDF. Create a new HTML page that has a single "object" tag that takes up the entire window; basically an HTML wrapper. Set the data property of the object to the PDF you originally wanted to link to. Set the link in your source HTML to point to the HTML wrapper. That way you can control how the wrapper loads and the PDF just shows up in the page. The HTML would look something like this...
<body style="overflow:hidden;height:100vh;margin: 0;padding: 0;border: 0;">
<object data="YOUR_PDF.pdf" type="application/pdf" style="width: 100%; height: 100vh"></object>
</body>
The link in your document would be a normal link to the above HTML page. It just looks like it links directly to a PDF.
My original task is to download multiple scientific publications as html file. Currently my script downloads a file in chrome but it takes to the url in firefox. But that is not my questions.
If you will see the downloaded html source, you will find that not all content has got downloaded. Only some of the content shows up in the downloaded html file. That is my problem. Why I am not able to get the whole html document content in the downloaded html file. The file I want to download is this
var links = [
'http://www.sciencedirect.com/science/article/pii/S2078152015000516'
];
I thought probably it is because of CORS issue. But, after implementing CORS script, it was still showing the partially downloaded content in the responseText.
Any assistance will be appreciated.
Also, if someone can tell me why in firefox, the script does not downloads the file and takes me to the url instead.
The reason why you are unable to download the entire page, is because the page only loads half way, and the rest is added dynamically once you scroll down.
Therefore, when you try to download the page, you only receive the initially loaded half without the dynamic part.
since it is done using javascript, this particular website offers you an alternative in case you have javascript disabled and do not want to/cant enable it (like with a reader):
If you view the source of the page, you can locate the following message box at the very beginning of the body:
<div class="ua_btn" role="region" aria-label="screen reader compatability">
<a role="button" rel="nofollow" href="http://www.sciencedirect.com/science/article/pii/S2078152015000516?np=y">
Screen reader users, click here to load entire article
</a>
This page uses JavaScript to progressively load the article content as a user scrolls.
Screen reader users, click the load entire article button to bypass dynamically loaded article content.
</div>
here you are offered a link with a query part "np=y" which overrides the dynamic loading and initializes the whole page right away:
http://www.sciencedirect.com/science/article/pii/S2078152015000516?np=y
use this link in order to download the artice and it will work.
Firefox:
As mentioned in the comments, firefox does not support CORS downloads by design due to potential security risks. more about it can be found Here
I am working on an HTML page (no server-side scripting) web page with JavaScript.
That has to be modified dynamically by the user. Then I want to let the user save this page locally as a .html file.
To achieve this, I suggest the user to use the browser function "Save
page as...".
I do that because I want the user to have complete local access to this file when off-line.
The question is that I would like the user to save the page in Printer Version after I have hidden all the stuff he does not need (menus, instructions, etc.).
I have already linked the css stylesheet for printing (with "media=print") and I would like to use it to change the aspect of the page before the user save it.
(It's not possible to use an iFrame because the browser function "Save page as..." saves always an entire page.)
I ask if anybody know a way to link dynamically a new
css-stylesheet to the page that will replace the css style hiding
the unwanted css classes.
The solution must work in recent versions of browsers, not old.
You can add a new style sheet with your print rules to your document as such when needed;
$('head').append('<link rel="stylesheet" href="printerFriedly.css" type="text/css" />');