Creating frames in html pdf

HTML5 PDF Viewer

The HTML5 PDF Viewer is a PDF viewer that is developed using HTML5 and JavaScript . It works in tandem with the PDF Automation Server to convert supported files (.pdf, .doc, .docx, . jpeg , . png , gif , . tiff ) directly to SVG format and then serve the document to the viewer.

Below are instructions on how to get started using the web viewer. The HTML5 viewer can be added to the page with minimal coding by simply creating an iframe element on the page with the path to the document.

HTML5 PDF Viewer

The standard viewer is designed to run on any desktop browser. The standard viewer can be loaded by itself as a full page viewer or embedded directly within the page using an iframe. A sample of the viewer embedded in an iframe can be found in the installation directory under «/html/viewer».

Creating a Direct Link to the Viewer

1. Create a link to serve a PDF to the user in the following format:
   • «http://:/viewer/pdfviewer.html?filePath=» replacing with the hostname or IP address of the PAS server, with the Port set for the rest service (default 8090), and with the relative path of the file stored within the «storage» directory of the PAS server. See REST Settings in the user guide for details on managing the hostname, port, and storage directory settings.
2. Navigate to the created URL to test the standard viewer.

Embedding the Viewer Within a Page

1. Create a new HTML page or choose an existing page to add the PDF Viewer to.
2. Add styling for the iframe to fit the area that you need. The below example creates a frame that fills most the page.
   • Note : The toolbar will resize automatically based on width but recommended 1,000px minimum.

/* Style the iframe: toolbar will resize automatically based on width but recommended 1,000px minumum */

/* Required to make the full screen button work */

1. Add an iframe element to the page where you would like the viewer to appear.
2. Set the attributes & additional options for the iframe. The iframe source (src) to the viewer URL must follow the below format:
   • «http://:/viewer/pdfviewer.html?filePath=» replacing with the hostname or IP address of the PAS server, with the Port set for the rest service (default 8090), and with the relative path of the file stored within the «storage» directory of the PAS server. See REST Settings in the user guide for details on managing the hostname, port, and storage directory settings.

1. • NOTE : If embedding the viewer in an iframe, the origin (domain, protocol, and port) MUST match the parent page. If not the iframe may not load due to browser security settings. Use the following code instead for Cross-Origin iframe .

var url = window.location.href;

HTML5 Mobile PDF Viewer

The mobile viewer is designed specifically to run on mobile devices with smaller screens. The mobile viewer has been optimized to make the best use of the entire area on smaller screens as well as touch enhanced navigation. You will need to either create a direct link to the mobile viewer («mpdfviewer.html») or add code to automatically redirect the user to the mobile viewer page if a mobile device is detected.

NOTE : For best results the mobile viewer should NOT be loaded within an iframe and should instead be served directly to the user as it’s own page. It’s recommended that instead of using redirect code, you should provide a direct link to the mobile viewer is created for mobile users. This will prevent unnecessary page flashing and shorten loading times on mobile browsers.

Creating a Direct Link to the Mobile Viewer

1. Create a link to serve the PDF to the mobile user in the following format:
   • «http://:/viewer/mpdfviewer.html?filePath=» replacing with the hostname or IP address of the PAS server, with the Port set for the rest service (default 8090), and with the relative path of the file stored within the «storage» directory of the PAS server. See REST Settings in the user guide for details on managing the hostname, port, and storage directory settings.
2. Load the webpage on your server using a mobile device to test the mobile viewer

Using JavaScript to Redirect to the Mobile Viewer

Below are instructions on how to setup a page redirect for mobile devices using JavaScript.

1. Follow the instructions for Setting Up the HTML5 PDF Viewer above.
2. Add the following JavaScript code to redirect the browser if a mobile device is detected to the header of the page (or create your own).
3. NOTE: Make sure to replace with the hostname or IP address of the PAS server, with the Port set for the rest service (default 8090). See REST Settings in the user guide for details on managing the hostname & port settings.

var docUrl = «http://:/viewer/mpdfviewer.html?filePath=» + getFilePath();

if (navigator.userAgent.match(/Android/i) || navigator.userAgent.match(/webOS/i)

Источник

Working with HTML

Before we discuss how to define page layouts with xhtml2pdf style sheets, it helps to understand some of the inherent differences between PDF and HTML.

PDF is specifically designed around pages of a specific width and height. PDF page elements (such as paragraphs, tables and images) are positioned at absolute (X,Y) coordinates.

While true PDF files use (0,0) to denote the bottom left of a page, xhtml2pdf uses (0,0) to denote the top left of a page, partly to maintain similarity with the HTML coordinate system.

HTML, by itself, does not have the concept of pagination or of pages with a specific width and height. An HTML page can be as wide as your browser width (and even wider), and it can be as long as the page content itself. HTML page elements are positioned in relationship to each other and may change when the browser window is resized.

In order to bridge the differences between HTML and PDFs, xhtml2pdf makes use of the concept of Pages and Frames. Pages define the size, orientation and margins of pages. Frames are rectangular regions with in each page.

The Frame location is specified in absolute (X,Y) coordinates, while the Frame content is used to flow HTML content using the relative positioning rules of HTML. This is the essence from which the power of xhtml2pdf stems.

HTML content will start printing in the first available content frame. Once the first frame is filled up, the content will continue to print in the next frame, and the next, and so on, until the entire HTML content has been printed.

Defining Page Layouts

xhtml2pdf facilitates the conversion of HTML content into a PDF document by flowing the continuous HTML content through one or more pages using Pages and Frames. A page represents a page layout within a PDF document. A Frame represents a rectangular region within a page through which the HTML content will flow.

Pages

The @page object defines a Page template by defining the properties of a page, such as page type (letter or A4), page orientation (portrait or landscape), and page margins. The @page definition follows the style sheet convention of ordinary CSS style sheets:

style> @page  size: letter landscape; margin: 2cm; > style> 

Frames

The @frame object defines the position and size of rectangular region within a page. A @page object can hold one or more @frame objects. The @frame definition follows the style sheet convention of ordinary CSS style sheets:

Here’s a definition of a page template with one Content Frame. It makes use of the Letter page size of 612pt x 792pt.

style> @page  size: letter portrait; @frame content_frame  left: 50pt; width: 512pt; top: 50pt; height: 692pt; -pdf-frame-border: 1; /* for debugging the layout */ > > style> 

This will result in the following page layout:

To visualize the page layout you are defining, add the -pdf-frame-border: 1; property to your each of your @frame objects.

Static frames vs Content frames

xhtml2pdf uses the concept of Static Frames to define content that remains the same across different pages (like headers and footers), and uses Content Frames to position the to-be-converted HTML content.

Static Frames are defined through use of the @frame property -pdf-frame-content . Regular HTML content will not flow through Static Frames.

Content Frames are @frame objects without this property defined. Regular HTML content will flow through Content Frames.

Example with 2 Static Frames and 1 Content Frame

html> head> style> @page  size: a4 portrait; @frame header_frame  /* Static Frame */ -pdf-frame-content: header_content; left: 50pt; width: 512pt; top: 50pt; height: 40pt; > @frame content_frame  /* Content Frame */ left: 50pt; width: 512pt; top: 90pt; height: 632pt; > @frame footer_frame  /* Another static Frame */ -pdf-frame-content: footer_content; left: 50pt; width: 512pt; top: 772pt; height: 20pt; > > style> head> body> div id="header_content">Lyrics-R-Usdiv> div id="footer_content">(c) - page pdf:pagenumber> of pdf:pagecount> div> To PDF or not to PDF body> html> 

In the example above, the vendor-specific tags and are used to display page numbers and the total page count. This example will produce the following PDF Document:

+-page------------------+ | +-header_frame------+ | | | Lyrics-R-Us | | | +-------------------+ | | +-content_frame-----+ | | | To PDF or not to | | | | PDF | | | | | | | | | | | +-------------------+ | | +-footer_frame------+ | | | (c) - page 1 of 1 | | | +-------------------+ | +-----------------------+ 

# Developer's note: # To avoid a problem where duplicate numbers are printed, # make sure that these tags are immediately followed by a newline. 

Flowing HTML content through Content Frames

Content frames are used to position the HTML content across multiple pages. HTML content will start printing in the first available Content Frame. Once the first frame is filled up, the content will continue to print in the next frame, and the next, and so on, until the entire HTML content has been printed. This concept is illustrated by the example below.

Example page template with a header, two columns, and a footer

html> head> style> @page  size: letter portrait; @frame header_frame  /* Static frame */ -pdf-frame-content: header_content; left: 50pt; width: 512pt; top: 50pt; height: 40pt; > @frame col1_frame  /* Content frame 1 */ left: 44pt; width: 245pt; top: 90pt; height: 632pt; > @frame col2_frame  /* Content frame 2 */ left: 323pt; width: 245pt; top: 90pt; height: 632pt; > @frame footer_frame  /* Static frame */ -pdf-frame-content: footer_content; left: 50pt; width: 512pt; top: 772pt; height: 20pt; > > style> head> body> div id="header_content">Lyrics-R-Usdiv> div id="footer_content">(c) - page pdf:pagenumber> of pdf:pagecount> div> p>Old MacDonald had a farm. EIEIO.p> p>And on that farm he had a cow. EIEIO.p> p>With a moo-moo here, and a moo-moo there.p> p>Here a moo, there a moo, everywhere a moo-moo.p> body> html> 

The HTML content will flow from Page1.Col1 to Page1.Col2 to Page2.Col1, etc. Here’s what the resulting PDF document could look like:

+-------------------------------+ +-------------------------------+ | Lyrics-R-Us | | Lyrics-R-Us | | | | | | Old MacDonald farm he had a | | a moo-moo everywhere a | | had a farm. cow. EIEIO. | | there. moo-moo. | | EIEIO. With a moo- | | Here a moo, | | and on that moo here, and | | there a moo, | | | | | | (c) - page 1 of 2 | | (c) - page 2 of 2 | +-------------------------------+ +-------------------------------+ 

Advanced concepts

Keeping text and tables together

You can prevent a block of text from being split across separate frames through the use of the vendor-specific -pdf-keep-with-next property.

Here’s an example where paragraphs and tables are kept together until a ‘separator paragraph’ appears in the HTML content flow.

style> table  -pdf-keep-with-next: true; > p  margin: 0; -pdf-keep-with-next: true; > p.separator  -pdf-keep-with-next: false; font-size: 6pt; > style> . body> p>Keep these linesp> table>tr>td>And this tabletd>tr>table> p>together in one framep> p class="separator"> p> p>Keep these sets of linesp> p>may appear in a different framep> p class="separator"> p> body> 

Named Page templates

Page templates can be named by providing the name after the @page keyword

Switching between multiple Page templates

PDF documents sometimes requires a different page layout across different sections of the document. xhtml2pdf allows you to define multiple @page templates and a way to switch between them using the vendor-specific tag .

As an illustration, consider the following example for a title page with large 5cm margins and regular pages with regular 2cm margins.

html> head> style> @page title_template  margin: 5cm; > @page regular_template  margin: 2cm; > style> head> body> h1>Title Pageh1> This is a title page with a large 5cm margin. pdf:nexttemplate name="regular_template" /> h1>Chapter 1h1> This is a regular page with a regular 2cm margin. body> html> 

© Copyright 2022, xhtml2pdf. Revision cabe0fb7 .

Источник