PDF.js How do you print a multi-page pdf? - javascript

I'm trying to add print functionality to a multi-page PDF embedded in a web page that is using the PDF.js library. It's problematic because I only have one page rendered at a time when a user is viewing it and the page is really rendered as an image in a canvas element.
This question does not help in this case because it is for a single page PDF where printing the current contents of the canvas are acceptable. Same with this question. I also want to avoid just opening the PDF in another tab/window and telling the user to print it themselves, which defeats the purpose of embedding it into the page.
Looking through the documentation from Mozilla, I haven't found any native functions that will just print the PDF, however, I will start playing around with the renderingIntent which seems like it can be set to 'print'.
EDIT:
redingIntent doesn't seem to affect anything and the PDF stills renders the same way whether it is set to 'display' or 'print'.

Remember PDF.js is just another web page. ATM, at least not in the standard HTML5 APIs, there is no way for a web page push random information directly to printers (but you can push it to the cloud printing service) -- you can print only what you "see". "See" means what's in the DOM, and currently CSS can be used to hide information for the screen or printer. The DOM can also be changed the beforeprint/afterprint events.
In you case, since your PDF view in embedded, you need to fake DOM to have all PDF's pages/canvases on the main web page, make them visible for print and hide for screen (see e.g. [4]). Few different problems needs to be solved too that might be off-topic here: removing margins and non-rasterizing canvas. Firefox is dealing with those via moznomarginboxes [1] and mozPrintCallback [2] -- both are created in support of PDF.js and not supported by other browsers. (See also polyfill for the latter [3])
[1] https://bugzilla.mozilla.org/show_bug.cgi?id=743252
[2] https://bugzilla.mozilla.org/show_bug.cgi?id=745025
[3] https://github.com/mozilla/pdf.js/blob/master/web/mozPrintCallback_polyfill.js
[4] https://github.com/mozilla/pdf.js/blob/master/web/viewer.css#L1759

Related

How to embed a pdf in the Autodesk Forge Viewer?

I am currently having trouble getting started with writing an extension that shifts the viewer to a pdf view. More or less, the extension button in mind, when clicked/activated, makes the viewer look like the first image here, and when it is clicked again/deactivated, it reverts back to the regular 3D viewer.
I tried looking into the code in the above link but I don't understand where the modelDocument object came from. I am using the Forge Viewer completely offline, so I am not dealing with any URNs, authentication mechanisms, etc. I already wrote extensions that can change the 3D model in the browser in some way, but this new extension is different.
Thank you in advance!
The viewer can only load multiple models at a time but they have to be both 2D or both 3D, you cannot load a 2D model in the same instance if you loaded a 3D model.
You could simply instantiate a 2nd viewer that will load the pdf view, either overlay a div, or navigate to another page or display it side by side like in my demo. That's really up to you.
If you use the viewer offline, then I'm assuming you somehow downloaded the viewable resources that correspond to the translated pdf, in which case you can simply load a 2D model the same way you load the 3D one, using viewer.loadModel('path/to/your/.f2d/resource').
Hope that helps

Printing iframe shows only a small viewport

I'm using an iframe to prevent the CSS of user-provided content (converted .doc files) from bleeding out of an AJAX panel in my single-page application. It's the last item displayed, usually about 5 pages following 1 page.
It works visually in the screen application, where I have a parent-relative height and width to leverage, but I realized I couldn't actually get the iframe to print its entire contents with #media print declarations.
I've seen about 5 related questions answered 'not possible', but I'm more flexible than those askers. I'm willing to:
use javascript if it can format the print view without affecting the screen view. can you point me to an example?
I currently directly insert the iframe's html, so I also have a lot of control over its content.
to print the parent and iframe contents separately, if they'll queue seamlessly in major browsers' print managers - especially if there's a way to handle browser print events in this case?
as a last resort, I will probably print ONLY the iframe content, using the following. still would like to handle print events if it's possible cross-browser.
javascript:
window.frames["OverlayDis"].focus();
window.frames["OverlayDis"].print();

How to save part of an html page to an image or pdf either on client (javascript) or asp.net on the server side?

Is there a way to implement functionality so that a user can Right click a subsection of an Html page (say a DIV or other container element) so that that part can be saved as an image/pdf (using javascript)?
Alternatively (ideally) can this be done on the server side in ASP.NET?
The use case for this is the following:
I have some complex web pages generated in asp.NET and using the javscript Flot library for the graphs. I would like to reuse part of the html page to generate PDF reports or at least image snapshots which can easily be inserted into reports. I have looked around and it seems there is a tool wkhmltopdf which converts the entire page to PDF, however there are 2 issues:
This tool needs to be run separately, which is not friendly for end users
The tool extracts everything on the page, e.g. menus headers , footers etc.
For the second problem I could generate web pages without the headers/footers and menus, and then use the tool, but this does not solve problem 1. Ideally I would like to generate the report weekly and automatically so the user only needs to download it.
For this purpose what is really needed is some way to store as pdf or image a DIV (or other element) referenced by id. This way I would not need to write separate code to generate the reports. I realize there will be a loss of quality converting html to PDF, but for our purposes, this is not that important.
IECapt# is a new and experimental version of IECapt written in C# to render a web page into a BMP, JPEG or PNG image file.
see http://iecapt.sourceforge.net/
You will have to make some calculations, if you want to crop the captured image to your requirements, or give the tool the html u actually want as an image,instead of the whole page.
Hope this helps.
In case this can help others, I finally settled for the iTextSharp library which is very powerful and also handles svg. It does not do the general html5 to pdf dump but with a bit of code I can do most of what I need.
main website is:
http://itextpdf.com/
download:
http://sourceforge.net/projects/itextsharp/

load external site and change its visualization

I'm trying to create a web page able to change a site visualization (.css or / and .js) in order to recreate the same live change capability offred by Firebug for Firefox or the Inspector of Chrome.
Here an image to better explain my task:
I have been able to visualize the other site inside my page using the iframe, but unfortunately it is not possible to change its visualization and access its elements due to the "same origin policy".
Is there a way to do this using the iframe or loading the external site inside another element?
Update:
Considering the answers the options should be:
create a php proxy page to load the target site and change visualization on it.
create a browser extention.
I've tried the first, even if it requires to install a web server (xampp), with a simple page calling the function file_get_contents('http://www.site.com');
The page is loaded but unfortunately missed some elements (like images) and it is only a static copy; it is not possible to go further in the site navigation.
Update 2:
Load the entire page via javascript could be the better solution (I don't konw how) if it is possible to live change the code but what about the possibility to interact with this "page copy" and transfer the interaction to the original one?
Scheme:
Explanation:
I've noticed Firebug extention can select and live edit any page element, even if they belong to the iframe which loads an external domain page.
What I'm looking for is a way to act like Firebug, get an element and change its style.
I'm trying to load the site into the iframe beacuse I wanted to create a toolbar above it to select my "visualization styles"; for example a button to makes titles bigger and red.
Anyway I'm open to any other methods suggestions.
Update 3:
I have found an extention for both FireFox and Chrome which is really close to my aim: "Stylish"
This add on allows to live change any site css proprerty and save it in order to reload them every time you'll visit the page.
Now my question is: How can I do the same creating a dedicated page to load and change visualization of a specific site?
FINAL EDIT:
In order to continue this question with a more relevant arguments I decided to ask a new one: create a php proxy page
No. Your solutions may be
to let your own site act as proxy so the same origin policy isn't triggered
to build an extension, which will be browser dependent (Firefox or Chrome) and which will require authorization and installation
I'm not sure if I understand what you want very well, but my feeling to ''trick'' this easier would probably to give very specific height and width to your first site (the iframe) and do a jQuery condition
If ($('body').width() == 500 && $('body').height() == 400 {
$('body').addClass('isiFrame');
}
Then, you only have to do your css .isiFrame .myCoolDivs {....}
You might have to use it on a document ready also, but that could be one way to trick it and since you're not doing it on resize (exepect if somebody's having his screen at this exact width and height at start)
The safer way would probably to create a master session using PHP but I cannot give you an example since it've been to long and echo the body class if the master_session or variable is equal to true
Hope it helped!
If you try to fight Same_origin_policy and try to fight it I am sure you won't get much success their.
Server Side
I would suggest you Handle this on server-side, grab the web-page and apply whatever styling and scripts you want, should be very easy!!
If you use Ruby on rails - Nokogiri gem can help you to parse html. And you can use standard library to 'get' a webpage.
Client Side
If you want to do this on client side, you need to write some jquery/javascript code, you can take following steps:
Get the webpage you want to display.
Grab the element's which include js/css files, remove them and your own.
Display the page in new Iframe present in your page.

How to convert a web page to PDF or image using Javascript?

I have created a graphics using jquery. and i want to convert this web page to pdf or an image. Which one is simpler? but when I convert this page to pdf that graphic will not shows. can any help me to solve this problem??? please refer some code.
JavaScript is interpreted by the browser, not by the HTML -> PDF application. I'd recommend using wkhtmltopdf, as it uses Webkit to render, so maybe that would fix your problem.
To try to render the page that includes JavaScript, fire up Google Chrome (or another browser with a DOM Inspector of sorts), open your webpage, right click and select Inspect Element, right click , click Edit as HTML, and copy & paste the HTML into a new text document, save it, and use that instead to convert to a graphics.
You have to go through a complicated process like this because that application that your are using renders only HTML + CSS, and doesn't even parse the JS. The DOM inspector shows the HTML pages as it currently looks, not when it was loaded.
I hope I didn't make it too complicated...

Categories

Resources