So this is a pretty straightforward question...
I'm linking to a pdf file from one of my pages. The link works fine...
link text
but the pdf is displaying very large (about 233%)... it's exactly how it looks when I open it in acrobat-it's just a poorly saved file; my question is whether there is a way to define how it is sized in the new tab?
I found a way to do it with javascript where I could define the size of the new window, but then it opens it in, yup, a new window... so even though it's a little easier to read, it doesn't flow as nicely as if it were just in a new tab... Is there any way to define it so that what's displayed in the new tab is a different size? or is linking to a pdf always limited to just displaying the pdf "as is."
Instead of a pdf link I would create a new html page with an iframe.
<html>
<body>
<!--Adjust the width-->
<iframe id="pdfIframe" style="width: 70%; display: none;"></iframe>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
</body>
</html>
// using jQuery
$(document).ready(function(){
var pdfIframe = $("#pdfIframe");
pdfIframe.attr("src", "http://www.irs.gov/pub/irs-pdf/fw4.pdf");
pdfIframe.height($(document).height()-50); // adjust this to maximize height
pdfIframe.show();
});
Here is the link to my JsFiddle
What you can do is to modify the PDF file and add a document open action that specifies a 100% zoom when the document is opened.
If the Adobe Reader plugin is used to display the file in the browser then the open action will be honored and the document will look like you want. Right now I assume the FitWidth zoom option is used by default.
Related
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 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.
I currently have a PDF embedded into an webpage. The PDF has several hyperlinks within it, but the links open in the parent frame when clicked. This takes the user to a new page with no option to return to the original PDF (navigation turned off). I can't seem to figure out how to get the links to open in a new window.
Sample PDF
<embed src="https://www.antennahouse.com/XSLsample/pdf/sample-link_1.pdf" type="application/pdf" />
Problem
Clicking second(External) link on this PDF will navigate to
another website within the same tab.
Working Plunkr
The PDF documents were originally created in PowerPoint, which prevents me from adding the proper href attribute. Is there a way to modify links within a PDF to include target="_blank"?
If not, I'm wondering if there is a something I can include within the html code that would universally control how links open.
Any suggestions are welcome.
Thanks.
Just to quickly qualify this answer, this should work for modern browsers, and only if the PDF and PDFJS are hosted on the same domain that you are embedding it in.
The trick here is to force the use of PDF.js and override Chrome's default behavior of rendering it like an extension. That way you get an iframe with html elements you can manipulate if you don't try and do it CORS. If this is for a CORS related use case, you are pretty much out of luck as editing a CORS pdf is kind of a security risk and rightfully disallowed.
You are going to want to start by getting a site set up following the example of "forced" usage. Resources here:
https://github.com/mozilla/pdf.js/wiki/Setup-PDF.js-in-a-website
https://pdfobject.com/examples/pdfjs-forced.html
You'll need to run it on a webserver as well, because it won't server correctly off the filesystem alone.. Hooray more CORS issues.
Then, you'll set up your page and call it like this (based on #Paco's gist)
<html>
<head>
<title>test pdf</title>
</head>
<div id="pdf"
style="width:900px; height:500px"></div>
<script src="https://pdfobject.com/js/pdfobject.min.js"></script>
<script>
var options = {
pdfOpenParams: {
page: 1,
view: "Fit",
toolbar: 0
},
forcePDFJS: true, //*** Forces the use of PDF.js instead of default behavior
PDFJS_URL: "web/viewer.html" //*** Required to use PDF.js
};
PDFObject.embed("../pdf-test.pdf", "#pdf", options);
document.querySelector('#pdf iframe').onload = function () {
//can try and hook the PDF.js event for rendering completed and call it then instead.
//https://stackoverflow.com/questions/12693207/how-to-know-if-pdf-js-has-finished-rendering
setTimeout(function () {
document.querySelector('#pdf iframe').contentDocument.querySelectorAll('a:not(.bookmark)').forEach(function (a, i) {
a.setAttribute('target', '_blank');
})
}, 5000)
}
</script>
</body>
</html>
Using Adobe Acrobat right click on the link properties. Click the Actions tab. If there are any actions listed delete them and then select Run a Javascript. Click add. A box will appear for you to add the following javascript. app.launchURL("http://www.yourlink.com", true);
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/