• Settings
    • Locale
    • Change the locale of the datepicker, schedule and client side validation messages.

      Language
      English
      English
      English
      French
      German
      German
      German
      Italian
      Korean
      Spanish
      Catalan
      Dutch
      Portuguese
      Portuguese
      Arabic
      Arabic
      Bulgarian
      Bangla
      Bosnian
      Czech
      Greek
      Estonian
      Persian
      Finnish
      Danish
      Hindi
      Indonesian
      Icelandic
      Croatian
      Japanese
      Hungarian
      Hebrew
      Georgian
      Central Kurdish
      Khmer
      Kyrgyz
      Kazakh
      Lithuanian
      Latvian
      Malay
      Norwegian
      Polish
      Romanian
      Russian
      Slovak
      Slovenian
      Serbian
      Serbian
      Swedish
      Thai
      Turkish
      Ukrainian
      Uzbek
      Vietnamese
      Chinese
      Chinese
  • Resources

Document Viewer

DocumentViewer is a JSF wrapper of the PDF.js project of the Mozilla Foundation, a general-purpose, web standards-based platform for parsing and rendering PDFs. It displays PDF documents inline without a browser plugin and supports localized languages (supported browsers).

DocumentViewer Tag Documentation

DocumentViewer displays PDF documents in the browser using PDF.js.

NameTypeRequiredDefaultDescription
id String false generated Unique identifier of the component in a namingContainer.
rendered boolean false true Boolean value to specify the rendering of the component, when set to false component will not be rendered.
binding UIComponent false generated An EL expression referring to a server side UIComponent instance in a backing bean.
cache boolean false false Whether to cache the document when using dynamic content.
disableFontFace boolean false true Whether to disable font face in PDF.js.
download String false Download filename for dynamic content.
height String false Height of the viewer iframe.
library String false Resource library when using static resource.
locale Object false Locale for the viewer. Can be a string or java.util.Locale instance.
name String false Resource name when using static resource (name/library).
nameddest String false Named destination to navigate to in the PDF.
page Integer false Initial page number to display.
pagemode String false Page mode: 'thumbs' or 'bookmarks'.
style String false Inline style for the iframe.
title String false Title for the iframe (accessibility).
url String false URL of the document to view.
value Object false Value of the component.
width String false 100% Width of the viewer iframe (e.g. '100%' or '800px').
zoom String false Zoom level (e.g. 'page-width', 'page-fit', 'auto', or numeric).
Tag Documentation Widget Source
Basic usage

DocumentViewer can be used in three modes: a url, a JSF resource (library and name) or a PrimeFaces StreamedContent (value).

Advanced Usage

It is also possible to set the locale and the starting page of the DocumentViewer.

Embedded Fonts

DocumentViewer has some complicated font handling: this tests a PDF with an embedded font.

Usage


<div class="card">
    <h5>Basic usage</h5>
    <p>DocumentViewer can be used in three modes: a <code>url</code>, a JSF resource (<code>library</code> and <code>name</code>)
        or a PrimeFaces <code>StreamedContent</code> (<code>value</code>).</p>
    <h:form id="formBasic">
        <p:outputPanel deferred="true">
            <p:tabView>
                <p:tab title="URL">
                    <pe:documentViewer height="500" url="/ui/media/documentviewer/book.pdf"/>
                </p:tab>
                <p:tab title="Resource">
                    <pe:documentViewer height="500" library="books" name="hood.pdf" zoom="page-width"/>
                </p:tab>
                <p:tab title="StreamedContent">
                    <pe:documentViewer height="500" value="#{basicDocumentViewerController.content}" zoom="page-width"/>
                </p:tab>
            </p:tabView>
        </p:outputPanel>
    </h:form>
</div>

<div class="card">
    <h5>Advanced Usage</h5>
    <p>It is also possible to set the <code>locale</code> and the starting <code>page</code> of the DocumentViewer.</p>
    <h:form id="formAdvanced">
        <p:outputPanel layout="block" id="container" deferred="true">
            <p:panelGrid columns="2" layout="tabular">
                <h:outputLabel value="Page"/>
                <p:spinner min="1" max="69" value="#{advancedDocumentViewerController.page}">
                    <p:ajax update="container"/>
                </p:spinner>
                <h:outputLabel value="Locale"/>
                <p:selectOneRadio value="#{advancedDocumentViewerController.locale}">
                    <f:selectItem itemValue="en" itemLabel="English"/>
                    <f:selectItem itemValue="de" itemLabel="German"/>
                    <f:selectItem itemValue="it" itemLabel="Italian"/>
                    <f:selectItem itemValue="pt_BR" itemLabel="Portuguese"/>
                    <p:ajax update="container"/>
                </p:selectOneRadio>
            </p:panelGrid>
            <pe:documentViewer
                    height="500"
                    locale="#{advancedDocumentViewerController.locale}"
                    page="#{advancedDocumentViewerController.page}"
                    url="/ui/media/documentviewer/book.pdf"/>
        </p:outputPanel>
    </h:form>
</div>

<div class="card">
    <h5>Embedded Fonts</h5>
    <p>DocumentViewer has some complicated font handling: this tests a PDF with an embedded font.</p>
    <h:form id="formEmbedded">
        <p:outputPanel deferred="true">
            <pe:documentViewer height="500" url="/ui/media/documentviewer/japanese.pdf"/>
        </p:outputPanel>
    </h:form>
</div>