save/print pdf embedded - javascript

I have 2 external buttons which will be printing and saving an embedded pdf on the page. After a couple of hours searching on google I couldnt find any helpful to solve this. I know that the embedded object has buttons to print and save, but the client wants it with 2 outside buttons. I'll appreciate any help you can give me, thnx.
This is how I have the pdf
<div class="test">
<embed src="embedded.pdf" width="300" height="175" />
</div>

Does not look like this is possible for all browser due to security concerns. Please take a look at Invoking the print/save/email function of Adobe Reader plugin in browser for further explanation.
However, it may be possible with ActiveX in IE, see Silent print a embedded PDF.

Related

How to embed a PDF in an HTML page?

I need to embed a PDF file in an HTML page for the users to see it on every major device.
Most of the approaches work fine on desktop but they start to show problems on iPad devices. The PDFs are no longer scrollable if placed inside an iframe or embed tag.
I used the following techniques to overcome the problem:
1) Using pdf-image for node and converting the PDF to images and then sliding them in a div.
The problem in this approach is that the image quality gets degraded and is not suitable for viewing on Web.
2) Using PDF.js by Mozilla
It works fine on every device but it makes the page extremely slow and unresponsive on iPad
3) Using Google PDF viewer
<iframe src="https://docs.google.com/viewer?url=http://public-Url-of-pdf.pdf&embedded=true" frameborder="0" height="500px" width="100%"></iframe>
The problem with this approach is that I need to make my PDFs publicly available which I don't want to do for security reasons.
None of the above method is working for me. Is there any solution available to embed PDF in a page which works on iPad also.
One of my colleagues told me about using LibreOffice(open office) headless to embed PDFs in my page but I cannot find any documentation about it usage?
Can anyone please help? :(
Thanks in advance!
<embed src="http://example.com/the.pdf" width="500" height="375" />
Try above one for pure HTML. But another option is if you'd like to use with javascript, try Pdf.js by mozilla. https://github.com/mozilla/pdf.js
I think the simplest way to embed a PDF into a web page is to use the object tag:
<object data="assets/test.pdf" type="application/pdf" width="100%" height="800px">
<p>It appears you don't have a PDF plugin for this browser.
No biggie... you can <a href="assets/test.pdf">click here to
download the PDF file.</a></p>
</object>
What the code above will do is:
- If the user browsing your site has a PDF viewer plugin (which is included by default in some browsers) it will open the PDF in the browser:
- If the user does not have a PDF viewer plugin, they will be presented with a link to download the PDF and view it on their site.
I spent a lot of time with this issue and finally reached a solution for embeeding PDFs in a HTML files, also inspired by this post. You mentioned that "converting the PDF to images and then sliding them in a div" was not satisfactory due to quality problems. Here I experienced the same since the images were blurry.
However, I tried converting the images to SVG instead of PNG and the situation was a different one: The fonts were crystal-clear when embedding the image like below:
<object type="image/svg+xml" data="https://ik.imagekit.io/nudvztcu8my/pdf2svg_example_Ft2FQgqWaG.svg">
<!-- Your fall back here -->
<img src="https://ik.imagekit.io/nudvztcu8my/pdf2svg_example_Ft2FQgqWaG.svg" />
</object>
You can directly paste that snippet into a HTML file and you will see the result. For producing this example I used a ramdom PDF from ArXiv.org and converted it to SVG using an online converter.
There are also free command line tools like pdf2svg or commerical APIs like Aspose and probably it is worth examining which approach gives the best results.
You can easily build a slider which is loading the SVG images dynamically and it is even possible to scale them to different viewports due to the vector character of the SVG images. The approach so far worked for all PDFs I tried but probably it is recommendable to implement a fallback solution still using PNGs.

Disable pdf download and save option

I have a PDF file being viewed on the browser.
I want to disable Save, Download and print option of the PDF file.
Please help.
Try this:
<object width="100%" height="100%" type="application/pdf"
data="yourpdffile.pdf#toolbar=0" id="pdf_content"><p>Document load was not
successful.</p></object>
Make sure you add #toolbar=0 in the data attribute after your pdf file.
You can use iframe to your own version of PDF viewer.
Use pdfJS and when showing viewer.html just remove these buttons.
If user is viewing it on it's own tool, than you can't control it.
Google Drive can disable the PDF functions to download, print and copy as of 2015.
Note however, that users can still print using the browser print function.
https://gsuiteupdates.googleblog.com/2015/07/disable-downloading-printing-and.html
As others have noted, once the pdf is being viewed by the user, they can save it.
If you are just wanting to obfuscate the download, you could disable the menu as described but to truly prevent downloading of the PDF, then only thing you could really do is a little crazy but not impossible.
You could convert it to images and show those instead. Not an ultimate solution as they would still be able to save each image, but at the very least they would not get a PDF file from it (or at least if they are smart enough to convert the images to one, it would not be the same pdf file or content)
There are many tools to do this and you'd have to implement a viewer with paging but this might achieve what you want.

How to change iframe source

the issue is that I'm trying to develop a web site and I'm using Google Web Design. So far so good. I've inserted an iFrame and I want to change it's source when I'm pressing a button. Every search that I've googled speaks about "src" but my iFrame has "source" attribute. I've tried almost every solution that I found but I gave up. It may be a stupid question but how am I supposed to do it? I've used "document.getElementById("myId")" or "window.frames['id']"... Not a chance. Anyone have an idea? Thanks a lot.
<iframe is="gwd-iframe" id="textToShow" source="" class="gwd-iframe-15nv gwd-gen-mv4zgwdanimation" style="background-image: none;" scrolling="auto">
</iframe>
gwd.goOnTheWeb = function(event) {
//should be in here
};
Please take a look into Google Web Designer Help > The iFrame component.
After some researches I've managed it. Finally, in Google Web Design there is an option in the right-click -> Add event... on an imageButton, called iFrame, that allows you to load an external page into an iframe. On the other hand, hopefully, I've found that somehow the "source" attribute of an iframe that the software writes automatically in code (I'm using OS X), is about to "guide" Safari while "src" is for browsing on Windows. Excuse me, please if I'm kind of "out-of-topic" but even being in IT, I've never developed a site since. So, have mercy. :)
myBtn.onclick = function() {
var filepath = 'video/hollywood-movies-2.mp4';
document.getElementById('textToShow').src = filepath ;
}

Javascript .print() Failing with IE11 for type application/pdf

I've made a sample of the code I've been using on my site for a while now that is now giving issues when running from IE11 and Windows 8.1.
The problem is that the Print Window does not pop up when the javascript method .print() is called anymore.
<html>
<head></head>
<body onload="window.document.getElementById('PDFDoc').print();">
<object id='PDFDoc' name='PDFDoc' type='application/pdf' data='Hello World.pdf' height="369" width="266" style="border-width:thin;border:#CCCCCC" >
</object>
</body>
</html>
I found this article that talks about something similar but was not able to use it as a fix myself.
PS: I would've uploaded the Hello World pdf but stackoverflow does not allow me to so just use any pdf to replicate the error.
In Debug mode I get the error object doesn't support property or method 'print'
I know that self.print() works but I'm not sure how to adapt it into this code to print the pdf and not the whole html page. Are there any other ways around this?
Correct me if I am wrong, but an <object> element does not seem to have a print() method. The reason why it worked in eariler IE I guess is because they did not give too much about standards but nowadays they tend to get closer to them, thus they might have dropped their custom print method.
You have plenty of alternatives however:
Hide everything that you don't want to print and call window.print()
Create a print.css stylesheet
You might be able to create an <iframe> element and append your element there, and call print on that iframe.
Also have a look at these discussions.
Although this is a quite old issue, here is an excellent solution which really works. Tested with IE11 v11.1039.17763.0 (in IE10 mode), Google Chrome v80.0.3987.132, MS Edge v44.17763.831.0 and MS Edge (on Chromium, beta) v81.0.416.20, all under Win10.
This solution directly opens the print dialog of the browser with the given pdf file.
<object id="objectPdf" data="my.pdf" type="application/pdf" width="1" height="1">
alt : my.pdf
</object>
<iframe id="iFramePdf" src="my.pdf" style="display:none;"></iframe>
<input type="button" value="Print PDF" onclick="printTrigger();" />
<script type="text/javascript">
function printTrigger() {
try {
document.getElementById('objectPdf').printWithDialog();
} catch(e) {
document.getElementById('iFramePdf').contentWindow.print();
}
}
</script>
Be aware, the provided solution has bad performance as it initiates three instead of just one HTTP requests!

HTML5 subtitles on Ted Talk Videos

I noticed that on ted talks, when embedding the video flash there are subtitles if you choose to have them. However, the html5 version does not have any. I was wondering if there was any way to get this working. Right now I have the iframe opening up in a lightbox.
A hacky fix I can think of is have a floating div that changes the text based off the JSON subtitle file (ex: http://www.ted.com/talks/subtitles/id/70/lang/pt) but... if there's a better solution I'd love to know it. But if anyone knows how to implement the hacky fix, that'd be great also.
Thanks :)
Here is an article describing how to get started with the Track element, which you can use to add subtitles or captions.
Edit: build a separate file containing your HTML5 video and track markup, and then reference that as the iframe source.
<html>
<head>
</head>
<body>
<iframe width="560" height="315" frameborder="0" src="YOUR_HTML5_VIDEO_PLUS_TRACK"></iframe>
</body>
</html>
Then, your .vtt file would look like:
railroad
00:00:10.000 --> 00:00:12.500
Left uninspired by the crust of railroad earth
manuscript
00:00:13.200 --> 00:00:16.900
that touched the lead to the pages of your manuscript.
You can make this .vtt file in any text editor, and change the file extension. You will need to host this on a web server, it will not work locally (e.g. src=file://)

Categories