Article Details

Id:	21264
Product:	finPOWER Connect
Type:	NEW
Version:	4.01.00
Opened:	12/03/2024
Closed:	12/03/2024
Released:	29/04/2024
Job:	J033070

HTML to PDF conversion; New meta tag to allow media queries to target "print" target

CSS media queries can be used to target different styling based on the target output, e.g., "screen" or "print".

This can be demonstrated by the following "Summary Page (version 2)" Script:

Script Code

Option Explicit On
Option Strict On

Public Function Main(source As Object,
                     eventId As String,
                     eventArgs As ISKeyValueList,
                     ByRef handled As Boolean,
                     ByRef returnValues As ISKeyValueList,
                     ByRef text As String) As Boolean

  ' Assume Success
  Main = True

  ' Handle Events
  Select Case eventId
    Case ""
      ' Main Event, i.e., Return main page content
      text = finBL.Scripts(ScriptInfo.ScriptId).TemplateText 
  End Select

End Function

Template Text

<html>
<head>

<style type="text/css">
@media screen { .is-noscreen { display:none; } }
@media print { .is-noprint { display:none; } }
</style>

</head>
<body>

<h1 class="is-noprint">This is Screen</h1>
<h1 class="is-noscreen">This is Print</h1>

</body>
</html>

Running this Script will produce a simple "This is Screen" message.

Clicking the "Print" button at the bottom of the screen changed this to "This is Print".

However, clicking the "Save as a PDF" button produced the message "This is Screen".

While the PDF reporting that it has been for screen display rather than printing is not strictly incorrect, it does make it difficult to target different styling when generating a PDF as opposed to displaying on the screen. For example, when displaying a page on screen, you may wish to display an interactive map. When generating a PDF, you might want to display a static map.

HTML to PDF generation already supports the concept of <meta> tags that can be added into the HTML to influence how the PDF document is created.

The following, new, meta tag can now be added into the HTML to force the PDF generation to use media queries for print rather than screen:

<meta name="pdf-MediaType" content="print"/>

From the above Script example, updating the Template Text to the following will now show the message "This is Print" when the PDF is generated:

<html>
<head>
<meta name="pdf-MediaType" content="print"/>

<style type="text/css">
@media screen { .is-noscreen { display:none; } }
@media print { .is-noprint { display:none; } }
</style>

</head>
<body>

<h1 class="is-noprint">This is Screen</h1>
<h1 class="is-noscreen">This is Print</h1>

</body>
</html>

NOTE: The only supported value fo this new meta tag is currently "print".

Print this Article