How to download and preview PDFs in Xojo Web apps may be one of the most asked questions involving PDFDocument (font handling is a close second) I get. If you are interested in finding the best, and simplest, way to do this, continue reading.
To start, create a Web project, select WebPage1 in the Navigator and drop a WebButton from the Library onto the upper-center of the page in the Layout Editor. In the associated Inspector Panel for the button change the following property:
- Caption: Create PDF
Next, add the Pressed Event Handler to it and type the following snippet of code in the associated Code Editor:
// Nothing really interesting here
// Create a new PDFDocument instance
// and assign its Graphic context to
// a variable
Var d As New PDFDocument
Var g As Graphics = d.Graphics
// The content of the PDF
// not that much, but it works for the
// main topic we are interested in
g.DrawText("Really simple PDF content", 20, 20)
// Here is where the **important** thing starts
// Creating a new WebFile instance and assigning it
// to the wf property added to the WebPage1 page
wf = New WebFile
// This is the thing: the PDFDocument.ToData method
// returns as a MemoryBlock (Direct conversion to String)
// the inner contents of the PDF document at this point
// so assign that to the "data" property of the
// WebFile instance
wf.Data = d.ToData
// It's important to set the right MIMEType for the file
// in this case, it's a PDF file
wf.MIMEType = "application/pdf"
// We assign the file name…
wf.Filename = "SamplePDF.pdf"
// …and set the ForceDownload to true…
wf.ForceDownload = True
// …so the file is, in effect, downloaded when calling
// the Download method on our WebFile instance
Call wf.Download
// Because we want to display the PDF file in an HTMLViewer
// set the ForceDownload property back to False
wf.ForceDownload = False
// And, finally, preview the PDF Document loading it in the
// HTMLviewer added to the WebPage1 page
HTMLViewer1.LoadURL(wf.URL)
As you can see here, this simple fragment of code is in charge of creating a sample PDF document, downloading it and also previewing it in an HTMLViewer instance. Now, add an HTMLViewer control to the WebPage1 page.
Select the WebPage1 item in the Navigator again so it is visible in the Layout Editor. Next, drag the HTMLViewer control from the Library and drop it below the WebButton added in the previous step.
With the HTMLViewer1 control selected in the Layout Editor, click on the four lock icons under the Locking section from the associated Inspector Panel so they are closed.
Finally, add the expected WebFile property to the WebPage1 page using the following values in the associated Inspector Panel:
- Name: wf
- Data Type: WebFile
- Scope: Private
You’ll probably want to move this property to the Session object in your Web projects so every connected user to the app can handle their own generated PDF documents.
And… that’s all! Run the project, click the button and see how it works.
Have fun!
Javier Menendez is an engineer at Xojo and has been using Xojo since 1998. He lives in Castellón, Spain and hosts regular Xojo hangouts en español. Ask Javier questions on Twitter at @XojoES or on the Xojo Forum.