How to create PDFs using LiveCode

This lesson will show you how to create PDFs using LiveCode. We will see how to create external links within the document and create a document outline for the document.

PDF_Printing.livecode

Creating a stack to be printed

Creating a stack to be printed

The LiveCode pdf printing commands are used to print cards of a stack. For this lesson we will use a stack with two cards to be printed. Each card has a field on it containing text from the LiveCode User Guide.

To create the sample stack select new stack > default size from the File menu and call it PDF Printing. The sample stack can be whatever size you want but as we will be printing to A4 it is best to have stack that has about the same ratio as A4 so the cards scale correctly when printed. I have set my sample stack to 575 x 800 in the Position tab of the Property Inspector.

Adding a card

Adding a card

Add a second card to the stack using the New Card option in the Object menu.

Adding fields and text

Adding fields and text

Go back to the first card by selecting Go First in the View menu. Add a field to the stack and set it to the same size as the stack, turn off any scrollbars on the field. Then put some text into the field. The card will be printed as you see it so ensure it looks just as you want it to appear in the PDF document.

Printing a card

Printing a card

The first step is to create a PDF document by printing a single card.

Open the stack script from the Object Menu and add the following printCards handler

on printCards
	## Path to the pdf file we want to create
	put specialFolderPath("documents") & "/UserGuide.pdf" into tPDFPath
   
	open printing to pdf tPDFPath
	if the result is "Cancel" then
		## The user has cancelled printing
		exit printCards
	else
		## Print the card into the printable area
		print card 1 of this stack into 0,0,575,800
	end if
	close printing
end printCards

We use print into rect to scale the card to fit the specified rect. In this case the rect we give is the same size as our stack so it should scale perfectly.

Printing Multiple Cards

Now set up the second card of the stack with a field and some text in the same way as the first card.

We need to update the printCards handler to print both cards. When printing multiple cards you need to put a page break after each card otherwise they will be printed on top of each other. Use the LiveCode print break command for this.

on printCards
   ## Path to the pdf file we want to create
   put specialFolderPath("documents") & "/UserGuide.pdf" into tPDFPath
   
   open printing to pdf tPDFPath
   if the result is "Cancel" then
      ## The user has cancelled printing
      exit printCards
   else
      ## Print the cards into the printable area
      print card 1 of this stack into 0,0,575,800
      print break
      print card 2 of this stack into 0,0,575,800
   end if
   close printing
end printCards

If you want to print all the cards of a stack you can use a repeat loop to step through each card of the stack and print it followed by a break. Test your progress by opening the message box and typing

printCards

into it and return.

Adding an external link to the PDF

On page 2 of the stack there is a link to the LiveCode lessons. We can use the print link command to add an external link to the pdf.

The print link command can be used to to add a link to external url or an internal link within the document as defined by the print anchor command.  To use the print link command you specify a target for the link and a rectangle describing the area on the page that will link to the given target.

To find the rect of the link area draw a graphic over the area you want to link to a url, make the graphic transparent and make a note of the rect of the graphic. Then update the printCards handler to print the link to the pdf.

on printCards
   ## Path to the pdf file we want to create
   put specialFolderPath("documents") & "/UserGuide.pdf" into tPDFPath
   
   open printing to pdf tPDFPath
   if the result is "Cancel" then
      ## The user has cancelled printing
      exit printCards
   else
      ## Print the cards into the printable area
      print card 1 of this stack into 0,0,575,800
      print break
      print card 2 of this stack into 0,0,575,800
      print link to url "http://lessons.livecode.com" with rect 5,17,209,36
   end if
   close printing
end printCards

When you open the PDF that is created that area of page 2 should link to livecode.com when you click on it.

Creating a document outline

The print bookmark command can be use to create a document outline in the PDF. The print bookmark command is used similarly to the print link command we used in the previous. To use it you specify the bookmark title, level and location where the title is the name of the bookmark which will be displayed in the outline, the level is the depth of the bookmark and the location is an x,y coordinate describing where on the current page the bookmark will be placed.

In this example we will place Level 1 bookmarks for chapter titles, level 2 bookmarks for a.b sections and level 3 bookmarks for a.b.c sections eg

print bookmark "1.3.1 All Operating Systems" with level 3 at 5,253

You can use the function to get the location of bookmarks, just place the mouse over the point on the card where you want to place the bookmark and execute 

put the mouseLoc

in the message box, this will give you a coordinate you can use.

Now update the printCards handler with all the bookmarks you want to add

on printCards
   ## Path to the pdf file we want to create
   put specialFolderPath("documents") & "/UserGuide.pdf" into tPDFPath
   
   open printing to pdf tPDFPath
   if the result is "Cancel" then
      ## The user has cancelled printing
      exit printCards
   else
      print card 1 of this stack into 0,0,575,800
      print bookmark "1 Introduction" with level 1 at 5,51
      print bookmark "1.1 Welcome" with level 2 at 5,147
      print bookmark "1.2 Where to begin" with level 2 at 5,773
      
      print break
      
      print card 2 of this stack into 0,0,575,800
      print link to url "http://lessons.livecode.com" with rect 5,17,209,36
      
      ## Print bookmarks
      print bookmark "1.3 System Requirements" with level 2 at 5,75
      print bookmark "1.3.1 All Operating Systems" with level 3 at 5,253
      print bookmark "1.3.2 Requirements for Windows System" with level 3 at 5,400
      print bookmark "1.3.3 Requirements for Linux Systems" with level 3 at 5,575
   end if
   close printing
end printCards

 

The final pdf

The final pdf

Your final PDF should include a link to the LiveCode lessons portal and a document outline that allows you to navigate around the document

20 Comments

Daniel Shapiro

This works fine on all platforms except my iPAD. I have added "launch document tPDFPath" to this script so the pdf opens automatically as well as saving to the documents folder.

However, when attempting this on the iPAD device, nothing happens. The PDF does not open, or I cannot find where the pdf is saved on the iPAD.

Can you shed any light on this? I have trawled through the forums and still no joy.

Hanson Schmidt-Cornelius

Hi Daniel,

you can display the PDF on iOS using native controls. Have a look at "mobileControlCreate" and "mobileControlSet" in the context of "browser".

Kind Regards,

Hanson

suma

HW TO CONVERT PDF INTO DOCUMENT USING LIVECODE

Hanson Schmidt-Cornelius

Hi Suma,

LiveCode does not have a built in utility to convert PDFs into the content components so that you could manipulate them freely. Implementing such a functionality manually would be outside the scope of a lesson here. If this is something you are interested in, I would recommend looking for command line tools or applications that have an API you could hook into from LiveCode. You could then either use the "shell" function to execute the command line tool or create an external to hook into the API calls.

Kind Regards,

Hanson

Stephen Taylor

Cant get this to work in a windows environment I was thinking part of the problem is the

specialFolderPath("documents") & "/UserGuide.pdf" into tPDFPath

any suggestions I am building a desktop app.

Regards
Stephen

Elanor Buchanan

Hi Stephen

Thanks for your comment, I have tried building a standalone on Windows and there does seem to be a bug. There is an option in the Standalone Application Settings for including the PDF Printing external but this doesn't appear to be working. I have reported this in our Quality Control Center where it will be picked up and investigated by the Development Team. You can follow progress at

http://quality.runrev.com/show_bug.cgi?id=11025

In the meantime you can work around the bug my manually including the file revpdfprinter.dll in the Copy Files pane of the Standalone Application Settings. You can find this file in the top level of your LiveCode folder.

I hope that helps.

Kind regards

Elanor

Neil Roger

Dear Stephen,

Thank you for your request.

I have added the following script to a button on the stack you supplied
and was able to print all pages of the stack without any issue-

on mouseUp
## Path to the pdf file we want to create
put specialFolderPath("documents") & "/UserGuide.pdf" into tPDFPath

open printing to pdf tPDFPath
if the result is "Cancel" then
## The user has cancelled printing
exit mouseup
else
## Print the cards into the printable area
print card 1 of this stack into 0,0,575,800
print break
print card 2 of this stack into 0,0,575,800
print break
print card 3 of this stack into 0,0,575,800

end if
close printing
end mouseUp

I ran your stack on a windows 7 machine.

I also ran your printPages handler on your stack script and didn't experience any issues when printing

If possible could you supply an example PDF that is created on your
machine? This will give me a better idea of what you are experiencing.

You will be able to send this to [email protected]

Kind Regards,

Neil Roger

--
RunRev Support Team ~ http://www.runrev.com
--

Stephen Taylor

Hi Neil,

I am using Win8 and WinXP.
Actually there is no PDF created.

Prior to your post, I also added a 'button' and script, and it prompted me to create a PDF and then printed just fine but, you also get the image of the 'button' on the printout. As this script when run captures and prints all items on the card.

I do not see any step in the lesson where the user is instructed to add a 'print button' nor dose it show in the example images.

I may have misunderstood the intention of the lesson as I assumed after creating the stack I would be able to create PDF's of the contents of the cards field only.

Regards,
Stephen

Hanson Schmidt-Cornelius

Hi Stephen,

the code in the original sample stack is for demonstration purposes and can be called by typing "printCards" into the message box.

If you are adding a button, then the script will print everything that is on the card. Before printing you could hide the button, and after printing make it visible again.

Try using syntax like:

set the visible of button "BUTTON NAME" to false
// The printing code in here
set the visible of button "BUTTON NAME" to true

Kind Regards,

Hanson

Nicholas Hansen

This only makes a PDF at screen rez-- any ideas on how to make this export at 150 or 300 dpi?

Elanor Buchanan

Hi Nicholas

The engine rasterizes anything it has to at 4x normal scale when generating a PDF. However, it tries to keep as much as possible as vector (e.g. text etc.) so res shouldn’t be an issue. Could you send us a sample of the PDF you have created to take a look at?

Kind regards

Elanor

Peter

Hi.
I have generated QR-codes with livecode-library sQuiRt. Works fine. But it is not possible to print the QR-codes in a clear and high resolution – they are looking really bad. The Text and one logo I had imported "as control" were fine and smooth. What can I do to improve the printtoPDF of the QR-code images?
Thanks for help.
Peter

Elanor Buchanan

Hi Peter

Thanks for bringing that to our attention. I have reported this as a bug

https://quality.livecode.com/show_bug.cgi?id=21736

The Development Team will pick up the bug report and investigate. You can add your email address to the CC list on the bug report if you would like to receive emails when the status of the bug is changed.

Kind regards

Elanor

Peter

Thank You. I will wait for the solution and I'm impressed about your support and fast communication.

Anonymous

Can you please attach the stack?

Elanor Buchanan

Hi, I have attached an example stack to the lesson. It has the 4 versions of the printCards command in the Stack Script. 3 are commented out so you can comment/uncomment the different versions as required.

Elanor

Christian Jacquelinet

Hi, I use a print to pdf in a script that take the content of a field and its rect to get a nice pdf file (with bookmarks, and colored text) attached and the sent with an email. It works well when sent form the stack on macOS. But on iOS, bold text is converted to plain text in the attached pdf file. Is it a known issue or limitation ? Any idea how to solve it ?

Elanor Buchanan

Hi Christian,

It might be that the font you are using doesn't exist on iOS so it is using a default font that does not have a bold variant. You could try using a different font and see if that makes a difference.

Kind regards

Elanor

Christian Jacquelinet

Thank you Eleanor, changing (styledText) to arial was indeed efficient. If I may suggest: making revPrintText with header, footnote AND bookmarks working on iOS/android would be great ...
Kind regards,
Christian

Elanor Buchanan

Hi Christian

I am glad to hear that helped. I have added and enhancement request in our Quality Control Center regarding revPrintText on mobile.

https://quality.livecode.com/show_bug.cgi?id=23121

Kind regards

Elanor

Add your comment

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.