FileMaker Webviewer and printing layout

[Jim1]

Hi,

I am trying to print a layout which has a webviewer on it. However, when printing/previewing the layout, the complete content of the webviewer is not displayed on the print out - I just send part of the content and then the web viewer scroll bar - which is no good. Other than creating an HTML file for the user to print - I am a bit stuck.

Any help would be much appreciated.

Thanks,

Jim.

[fseipel]

Hi Jim,

You can try making the webviewer window larger; is it cut off horizontally? Can you print layout in landscape? Set % reduction in print dialog box?

If you want the webviewer to be printed by the browser engine, rather than Filemaker, you can set the URL to javascript:window.print(); after page loads, to command the webviewer to generate output identical to that of a browser/as though you right-clicked webviewer and selected 'print'. Downside of that method is it presents a print dialog to the user (may be a good or bad thing). Also, it will not print any information from the layout, only the webviewer contents.

You can also set the URL to javascript:scroll(x,y); to scroll the contents to that part of the webviewer window which is of interest prior to issuing Filemaker print command, where x and y are in pixels. Since FM prints the webviewer at the position currently viewed, this allows you to select what part of page is printed.

Finally, another option is to parse out the HTML/image links you want to print, combine it with any Filemaker fields you want to print, and go to a new layout where you have a 'data' URL presenting this information in a webviewer. The basic data URL method is described here and many other locations: http://sixfriedrice.com/wp/filemaker-9-tip9-web-viewers-without-the-web/

You can also execute one of the many javascript to shrink text size across a page to adjust text.

Getting the data out of the webviewer and into a Filemaker field will provide greater display and printing flexibility.

[Jim1]

Thanks fseipel,

Thank you for your indepth suggestions. In answer to your suggestions:

You can try making the webviewer window larger; is it cut off horizontally?

- Yes, the webviewer is simply cut off in preview mode, therefore the rest of the underlying content is never seen.

Can you print layout in landscape?

- I can, but again this is no good as the rest of the content is cropped.

Set % reduction in print dialog box?

- No effect on the webviewer - It is like the webviewer does not know how much content there is "inside".

I'll probably try the JS window.print functionality and "append" to the HTML with the field data that I also would like to show, by "injecting" it into the HTML source code.

I agree that getting the data out of the webviewer and into a Filemaker field will provide greater display and printing flexibility, but with the content in my web viewer, it will not be possible.

Thank you once again for your rapid help here. I think I can class my issue as resolved, and all in one morning!! :

Thanks a million,

Jim.

[Gregory Colley]

Hi Jim,

I was having the same problem. i.e.  getting a full printout from webviewer.  I ended up simply using FileMaker's Webviewer as a preview for the webpage.  And for printing I simply created a button called View in Browser and used "Open URL".  I built a print button into the website so it would be easy for the client to make a printout.  e.g. 

If you are managing the website, you could build this into it... 

 

----Put this in your HTML Header ---------

<script>   
    function printDiv(divName) {
         var printContents = document.getElementById(divName).innerHTML;
         var originalContents = document.body.innerHTML;

         document.body.innerHTML = printContents;

         window.print();

         document.body.innerHTML = originalContents;
    }
</script>

 

<input type="button" onclick="printDiv('printableArea')" value="Print Form" /> <!--  Put this above or below the Printable Area Div -->

<div id="printableArea">

<!--  put all the stuff you want to print here -->

</div>