JavaScripting PDFs
FileMaker Pro has a wonderful PDF generator. In fact, one of the biggest benefits of using FileMaker for the purpose of output is that you can make any layout look exactly how you'd like and with a few script steps, you've got PDF output which will fit 95% of the situations you'll come across.
There are, however, certain situations where knowing how to generate a PDF using JavaScript, from within a Web Viewer, will give you the exact results you're looking for.
There are a number of advantages with this approach. First, it can be SUPER fast when generating the PDF and second, you can selectively decide what you want to output from within the whole of your HTML. So, if you're using HTML to present a lot of information, but only want a PDF of a portion of that HTML, then you can certainly accomplish that with this technique.
Even if you don't need the exact functionality of HTML -> PDF output there's a lot to learn from this video if you've never used JavaScript in order to call a FileMaker script and pass in some data.
Comments
Demo file will not work on a pc
Hi Matt
Great video. Thanks. The demo file does not work on a pc. Nothing happens when i click the "Make
PDF" button. Script debugger is on and Filemaker script javascript triggers does not seems to trigger.
Regards
Kev
File is fixed.
Oops, sorry about that for those of you using Windows. I had mentioned it within the video but didn't modify the file itself. When we're passing data from JavaScript via a URL we have to mindful of the limitation of the number of characters.
For this reason we have to add an additional field called PASTE and we have to use the clipboard to capture the PDF. The file has been updated as of the date of this comment.
-- Matt Petrowsky - ISO FileMaker Magazine Editor
Javascript
Hi Matt
Can the filemaker FMP: url work if it is part of javascript code in a php file sitting on a server? I am using php files on a server, so if php file is viewed in a webviewer on users machine can the Make pdf button still work if you change the url to this format FMP://192.168.10.0/filename.fmp12?$var=variableName
PDFs are client side
If the url loads the proper JavaScript libraries and that url is service side using PHP (or any other language) then the answer would be "Yes". As long as the JavaScript libraries are loaded and ready to use the client is where the PDF is generated.
-- Matt Petrowsky - ISO FileMaker Magazine Editor
Problems with the demo file and impossible to download the video
in any size! What happens Matt to day with your website?
It seems to be great! Please fix it as soon as possible. Thanks in advance.
Regards.
Video downloads do have occasional caching issues
I'm trying to figure out the issue with Vimeo where the videos are hosted. There are times when the links stop working based on they way they validate.
-- Matt Petrowsky - ISO FileMaker Magazine Editor
Adding <footer>
Hi Matt!
Thanks for the video!
Any idea of adding footers? I placed a text between the footer tags and it's looking good in the webviewer, But it fails when I create the pdf (it seems it's been interrupted by the iframe).
Regards
Javier Martí
Support for Webdirect?
Hi Matt,
Thanks for this wonderful tutorial!
I wonder if there is a way to run the PDF generator and save the actual PDF file into a global container field while accessing the file from Webdirect.
I just opened the sample file on Webdirect and tested it. It does generate the HTML (PDF) in WebViewer but it does not upload the actual PDF file into PDF global container.
I believe it has something to do with Windows OS. I don't have access to a mac to test it on MAC right now.
Thanks.
Sample file will not open/crashes Filemaker on Mac
When the splash screen opens, it attempts to go the the first layout, then crashes Filemaker. This is a subject I am really interested in. Can you send me a working file?
this is where it crashes
line 24: Go to Layout [ "Form" (Interface » Technique) ; animation: None ]
Everything but Combining..?
Hi Matt,
I've modified a FM 16 DB that is running on a PC to use this process. Everything works, except combining the individual PDFs into a single PDF. I took out the "Delete" section to see the files. I know this is an old solution--but it would be great if I could get it working. Any ideas? Thank you!
William Block
BlockOne
Wilmington, NC
Not Combining PDFs on Mac either?
Hi Matt,
Tried the same process on a Macbook Pro running OSX Catalina and FM 16. Individual PDF files are created, but the combined PDF is not? Any ideas? Thank you!
William Block
BlockOne
Wilmington, NC
Help please
I have watched your video several times but when I insert my html I get the following.
"
Customers in the state of " & Interface » Technique::State & "
"; "
"; Substitute ( CustomersByState ( Interface » Technique::State ) ; ¶ ; "
¶
" ); "
"
Below is my WebViewer content - hope you can help me.
"data:text/html," &
List (
"<html>";
"<head>";
"<meta name=\"format-detection\" content=\"telephone=no\" />";
"<meta name=\"viewport\" content=\"initial-scale=1.0\" />";
"<meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge, chrome=1\">";
"<style type=\"text/css\">";
Interface » Technique::CSS;
"</style>";
"<script type=\"text/javascript\">";
GetLayoutObjectAttribute ( "jquery-3.1.1.min.js" ; "content" );
"</script><script type=\"text/javascript\">";
GetLayoutObjectAttribute ( "jspdf.min.135.js" ; "content" );
"</script><script type=\"text/javascript\">";
GetLayoutObjectAttribute ( "text.js" ; "content" );
"</script>";
"</head>";
"<body style=\"border: 0pt;\">";
"<a href=\"javascript:makePDF()\" class=\"ignore button\">Make PDF</a>";
Interface » Technique::html ;
"<iframe id=\"output\" type=\"application/pdf\" width=\"100%\" height=\"100%\" frameborder=\"0\" style=\"position:relative;z-index:999\" src=\"\"></iframe>";
"</body>";
"</html>";
)
/*
<iframe class=\"preview-pane\" type=\"application/pdf\" width=\"100%\" height=\"350\" frameborder=\"0\" style=\"position:relative;z-index:999\" src=\"blob:http://rawgit.com/9e39cdf1-8682-4f38-b02b-06b32f19bb38\"></iframe>
*/
/*
<iframe id=\"output\" type=\"application/pdf\" width=\"100%\" height=\"150\" frameborder=\"0\" style=\"position:relative;z-index:999\" src=\"\"></iframe>
*/
Help please
I have watched your video several times but when I insert my html I get the following.
"
Customers in the state of " & Interface » Technique::State & "
"; "
"; Substitute ( CustomersByState ( Interface » Technique::State ) ; ¶ ; "
¶
" ); "
"
Below is my WebViewer content - hope you can help me.
"data:text/html," &
List (
"<html>";
"<head>";
"<meta name=\"format-detection\" content=\"telephone=no\" />";
"<meta name=\"viewport\" content=\"initial-scale=1.0\" />";
"<meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge, chrome=1\">";
"<style type=\"text/css\">";
Interface » Technique::CSS;
"</style>";
"<script type=\"text/javascript\">";
GetLayoutObjectAttribute ( "jquery-3.1.1.min.js" ; "content" );
"</script><script type=\"text/javascript\">";
GetLayoutObjectAttribute ( "jspdf.min.135.js" ; "content" );
"</script><script type=\"text/javascript\">";
GetLayoutObjectAttribute ( "text.js" ; "content" );
"</script>";
"</head>";
"<body style=\"border: 0pt;\">";
"<a href=\"javascript:makePDF()\" class=\"ignore button\">Make PDF</a>";
Interface » Technique::html ;
"<iframe id=\"output\" type=\"application/pdf\" width=\"100%\" height=\"100%\" frameborder=\"0\" style=\"position:relative;z-index:999\" src=\"\"></iframe>";
"</body>";
"</html>";
)
/*
<iframe class=\"preview-pane\" type=\"application/pdf\" width=\"100%\" height=\"350\" frameborder=\"0\" style=\"position:relative;z-index:999\" src=\"blob:http://rawgit.com/9e39cdf1-8682-4f38-b02b-06b32f19bb38\"></iframe>
*/
/*
<iframe id=\"output\" type=\"application/pdf\" width=\"100%\" height=\"150\" frameborder=\"0\" style=\"position:relative;z-index:999\" src=\"\"></iframe>
*/
Demo file crashes Filemaker 18 on iMac
Hi Matt - in case others are having the same problem, I worked around the issue by deleting the PDF container and re-adding it to the Form layout.
Activating the debugger before opening the file narrowed my crash to the initial Form layout load. Filemaker also crashed when browsing the layout independently. I re-downloaded the demo file to ensure it wasn't corrupted.
I've been a subscriber for about a year now, and find all of your videos and sample files immensely helpful. Thanks and keep them coming!!