Printing a WebViewer in FileMaker

[MonkeybreadSoftware]

At Claris Engage we got the question about how to print a web viewer in FileMaker. While FileMaker has nothing built-in in that direction, we can provide a solution in our MBS FileMaker Plugin with the WebView.Print function.

Print

You can add a print button to the layout, assign it a "Set Variable" script step to run and then call MBS( "WebView.Print"; WebViewerRef ) there. For the WebViewerRef parameter you can pass the name of the web viewer and our plugin should find it on the current window. For more difficult cases you can use WebView.FindByName and specify the window with a window reference.

It may be useful to tune the website beforehand with some JavaScript or CSS to hide content you don't want to print. Our documentation website uses extra CSS files for media=print, so we can hide the sidebar with navigation for a print out. If you like to hide something for your printout, you may want to use a bit of JavaScript with WebView.Evaluate to hide an element:

document.getElementById('HelpNavigation').style.display = 'none';

We frequently hide things like navigation bars, advertisements or the headers/footers from a website. 

Print to File

The WebView.PrintToFile function allows you to run a print session and target a file on disk. Supported both for macOS and Windows, we can create a PDF from the website content. You may use a snippet like below to find the temporary folder and define the file path. After printing completed, you may load the PDF document into a container field:

Set Variable [ $path ; Value: MBS( "Folders.UserTemporary" ) ]
Set Variable [ $path ; Value: MBS( "Path.AddPathComponent"; $path; "website.pdf" ) ]
Set Variable [ $r ; Value: MBS( "WebView.PrintToFile"; $$web; $path ) ]
Set Field [ Own WebView::Container ; MBS( "Files.ReadPDF"; $path) ]

Next you may want to adjust some print parameters.

Print Parameters

Using the WebView.SetPrintParameter function, you can set a few parameters for the next print operation. This allows you to define various parameters for the next print. If you print a PDF, you may want to use paperWidth and paperHeight to define the paper size directly. e.g. with 576 by 842 for an A4 page. For macOS we can also pass paper name parameter to pick the size by name.

We could set A4 size:

Set Variable [$r; Value: MBS("WebView.SetPrintParameter"; "paperWidth"; 576) ]
Set Variable [$r; Value: MBS("WebView.SetPrintParameter"; "paperHeight"; 842) ]

More interesting may be to use orientation parameter to decide whether you like to have a wider landscape size of the page or the regular portrait page format.

Set Variable [$r; Value: MBS("WebView.SetPrintParameter"; "orientation"; "landscape") ]

Print Preferences

The WebView.SetPreferences function can set preferences for web viewers. One of the more interesting option for printing is the shouldPrintBackgrounds flag. 

Turn backgrounds off for print:

Set Variable [$r; Value: MBS("WebView.SetPreferences"; "web"; "shouldPrintBackgrounds"; 0) ]

Turn backgrounds on for print:

Set Variable [$r; Value: MBS("WebView.SetPreferences"; "web"; "shouldPrintBackgrounds"; 1) ]

You could also set minimumFontSize option.

Render Image

Instead of printing, you can alternative render the web content as image with WebView.RenderImage function. This provides a picture of the web content visible in the web viewer. Alternatively we got the WebView.Screenshot to take a screenshot of the web view area.

Set Field [ Own WebView::Container ; MBS( "WebView.RenderImage"; $$web; "PNG"; "webview.png") ]

For macOS we have WebView.RenderPDF function to provide the current page as PDF. This isn't just the current viewed portion, but the whole page rendered as one big PDF page.

Set Field [ Own WebView::Container ; MBS( "WebView.RenderPDF"; $$web; "webview.pdf") ]

See also
Using PerformScript in a custom WebViewer in FileMaker
Automate web viewer in FileMaker
Run JavaScript synchronously in a WebViewer
FileMaker and WebViewer communication
WebPreferences for WebView2