How to embed a pdf in the Autodesk Forge Viewer? - javascript

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

Related

Inject an html table into an image available as an ArrayBuffer

Basically I want to go from here (available as an ArrayBuffer):
to here: (also available as an ArrayBuffer)+
So it's
ArrayBuffer -> Image -> Image with overlay -> ArrayBuffer
in javascript only without showing anything to the user.
If possible, I want to generate that table using html (still without showing anything to the user).
I had that idea of displaying an invisible Chrome Appwindow to render the page with the image as its background just to export it using the html2canvas library.
However, there has to be a better approach to this ...
Does anyone have an idea of how to implement such a functionality?

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

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

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/

Adding touch targets over a PDF document in an HTML page

I'm looking to add a degree of interactivity to a set of PDF files that I have, and would like to embed a PDF document in a webpage, and then overlay touch targets to I can make a popop over them.
What would be the best way to make this happen? I briefly looked into Mozilla's pdf.js, but thats more focused on being a full on PDF reader, and has sluggish performance on tablets.
Are there any reliable PDF to HTML libraries/converters that could help me out? The PDF's are fairly basic. More or less just a bunch of images (which are individually selectable in the PDF) in a grid.
At the moment I am opening the PDF in Photoshop, slicing it up, and then exporting it as an HTML table, but I would love something a bit easier to do
I don't see a way around a server-side solution. Here is how I would do it in PHP using ImageMagick:
<?php
$someFile = $_GET['pdf'];
try
{
// Saving every page of a PDF separately as a JPG thumbnail
$images = new Imagick($someFile);
foreach($images as $i=>$image) {
$desiredWidth = 1024;
$image->thumbnailImage($desiredWidth,0);
// Save the file to disk
//$image->writeImage("page".$i.".jpg");
// Or display it from this script:
header('Content-Type: image/jpg');
echo $image;
}
$images->clear();
}
catch(Exception $e)
{
echo $e->getMessage();
}
?>
If your PDF is a single page then that script will just create a single file or if you echo the $image then it will just display that page as a JPG (or PNG or whatever you want). Then you can mark up your HTML around it as needed by including the script as an IMG:
<img src="myscript.php?pdf=somefile.pdf"/>
Now you can have whatever HTML you want over and around the PDF as an image.
I've implemented a commercial solution called PDFWebViewer.NET to view PDFs in the browser a couple of years ago. It uses server side image rendering (.NET) and nothing but HTML and javascript client side.
I think that's as close as you can get to viewing PDF in the browser without any plugins. Since it's all HTML you can overlay pages with divs and hook up actions to that using javascript. In fact, that's how the product renders out links in the PDF documents.
This works really well because by using relative positioning you can make sure the links stay in the right place while panning the document.
The project was recently open sourced but still relies on commercial components. It should not be a lot of work to replace that with open source PDF components.
The project is hosted on codeplex. PDFWebViewer 1 is the first generation, WebViewer 2 is the latest version.
I would advice you to use wkhtmltopdf. It allow you to work bassically with any web content whitch is on the fly converted to pdf format by taking a "snapshot of screen" (simple explanation). For example you can write your own html template just like you would on any website and than populate it with custom data. You can use it generate for example an invoice. Im using it for couple months now and without any single problem.
Its simple shell utility to convert html to pdf using the webkit rendering engine, and qt. And of cource its open source!
Example:
wkhtmltopdf www.myhomepage.com myhomepage.pdf

Control PDF using javascript in web browser

I want a frame with a PDF document. The main document will use javascript to tell the PDF document what page to display and zoom level. Can this be done? If so, how or could you point me to documentation on it. Thanks.
You can't/shouldn't do it in a frame, but you can create an <object> on your page that is controllable using the JavaScript API.
http://www.adobe.com/content/dam/Adobe/en/devnet/acrobat/pdfs/js_api_reference.pdf
Not easily. It all depends on what's being used to display the PDF in the browser. Not all browsers have built-in PDF viewers, and then there's many different external viewers (e.g. Acrobat, Fox-It, etc...) as well. As far as I know, there's
You can try hacking up the URL like this:
http://example.com/somedocument.pdf#page=5
but this may work in Acrobat only, as documented here: http://partners.adobe.com/public/developer/en/acrobat/PDFOpenParameters.pdf
Do you need a PDF reader to be loaded and running? If not, you could write a back end script/program to render a specified page as an image (GIF, PNG, etc.) at a particular zoom level. Then your main page could load an image with something like:
<img src="render_pdf?page=4&zoom=150">
The src value could be controlled with javascript to make it dynamic.
To convert from PDF to an image in your render_pdf script, you can use ghostscript, or an image specific library like ImageMagick or GD, depending on what backend technology you are using.
Have a look at jsPDF - it may not output a .pdf onscreen in IE6 and IE7 due to limitations with datauri's, but its a good start. I dont see why this couldnt be built up in an iframe either.
As Jordan pointed out, you should use the <object> tag to embed the PDF. Then, in the PDF itself, you need to embed Javascript to handle the messages you pass in, such as:
if(!this.hostContainer.messageHandler) this.hostContainer.messageHandler = new Object();
this.hostContainer.messageHandler.onMessage = handleMessage;
function handleMessage(msg) {
// do stuff here
}
Finally, in your HTML JS, you pass messages in with:
document.getElementById('yourpdfobject').postMessage('some message or array');

Categories

Resources