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
Related
I am fetching the HTML code from some external API. On my website, I want to create an anchor, which will open a new tab showing that HTML code parsed. How can I do that?
One way I know of is to just make an iframe, and show the code there, but that won't open a new tab and won't adjust the size easily.
What's the best way to solve this? I am using node.js express as a website's server.
you could use window.open("your url here") javascript function. You could just use an onclick attribute to call it like below:
<span onclick='window.open("your url here")'>view</span>
after which you could replace contents of a tag (lets say the body tag) with the html code received from the external API with standard javascript
I have a excel file I turned into a .mht file, and I am embedding it successfully in a html page using iframe. Now the excel file has hyperlinks inside it. I am wondering If I can have it to where when a person clicks on a hyperlink inside the excel file it will open up a new tab in the web browser or just open up a new browser window. Can this be done through coding inside the iframe or do I have to do some kind of coding inside the excel file ?
Posting what the html code is if I can edit it or add a property to it if someone knows. Maybe I may need to use something besides iframe to get it to work on a html page.
<iframe src="LinktoFile.mht" width="100%" height="100%"></iframe>
any file that you convert/ save as from excel can easily be edited (using notepad even). ADvisable that you removable the microsoft auto-generated css, but the main thing is that you add a target ="_blank in your hyperlink html. This will make the hyperlinks open in a new window.
I know it works with html files but i don't see why mht files should differ greatly (and besides, why make life more difficult? Just save as a html file..)
I read that .MHT is a "Mime HTML" file, a kind of html archive. The browser support for it seems limited. If you're ok with that read on...
As long as the parent html file and the mht file are on the same domain, you might be able to add to/modify the DOM of the mht file. I don't know for sure.
Here is a test you can try. Modify your iframe tag with an id, and then put the script block right after it. The result should be that all tags in the iframe open in a new tab. If that doesn't happen please check the browser console for any errors and report back.
<iframe id='xl' src="LinktoFile.mht" width="100%" height="100%"></iframe>
<script>
$('#xl').on('load', function () {
$('#xl').contents().find('a').attr('target', '_blank');
});
</script>
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.
Hey guys I have searched a lot but didnt get any working solution for this problem.
I am working on a site using jsp and on this we have to upload forms in doc / docx/ pdf format. I want to generate the preview of the first page of the form. So that user can checkout whats in the form before downloading it.
Hope someone will come up with some solution for this.
Thanks
Not sure what OS platform you are on for your jsp, but my recommendation would be to have a virtual printer driver that can "print" the document at hand to an image file (or as HTML). Then you can manipulate the output of the printer driver anyway you want. Extends itself nicely to other file formats as well.
Another version of this technique would be to programatically open the document with Microsoft Word (using ole automation), then do a screen capture after the document opens. Word can load PDF files as well. You'll have to find a creative way to get the document into a Windows desktop process from your server. But it could work.
Well.. what you can do is..
Hyperlink the form names with relative paths of your jsp with download option. You need to write a servlet to download the form.. preview this jsp in pop up window.
or
use iframes in html create a div tag to preview and download the same form you are displaying. You need to write a servlet to download the form.
Make sure you set the appropriate contentType of your forms doc/pdf/jsp using response.contentType("image/jpg");
response.contentType("application/pdf");
response.contentType("application/doc");
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/