PDF Viewer

Embed PDF Viewer to display PDF file’s stored in the DAM on the page.

Github URL
Adobe URL
Source URL
Title
Full Window
Content

The viewing area renders in the full browser. Best suited for storage and productivity applications.

Result
Properties:
jcr:primaryType: nt:unstructured
jcr:createdBy: admin
showPrintPdf: true
dockPageControls: true
documentPath: /content/dam/core-components-examples/library/sample-assets/Bodea Brochure.pdf
jcr:lastModifiedBy: admin
defaultViewMode: FIT_PAGE
jcr:created:
type: FULL_WINDOW
showPageControls: true
showLeftHandPanel: true
showFullScreen: true
showDownloadPdf: true
jcr:lastModified:
showAnnotationTools: false
sling:resourceType: core-components-examples/components/pdfviewer
borderless: false
Markup:
<div class="pdfviewer">
  <div class="cmp-pdfviewer" id="pdfviewer-97a46bd902" data-cmp-client-id="630681c60b144a498850fc22c1df83e0" data-cmp-document-path="/content/dam/core-components-examples/library/sample-assets/Bodea Brochure.pdf" data-cmp-document-file-name="Bodea Brochure.pdf" data-cmp-viewer-config-json="{&quot;embedMode&quot;:&quot;FULL_WINDOW&quot;,&quot;defaultViewMode&quot;:&quot;FIT_PAGE&quot;,&quot;showAnnotationTools&quot;:false,&quot;showLeftHandPanel&quot;:true,&quot;showPageControls&quot;:true,&quot;dockPageControls&quot;:true,&quot;showDownloadPDF&quot;:true,&quot;showPrintPDF&quot;:true}" data-cmp-data-layer="{&quot;pdfviewer-97a46bd902&quot;:{&quot;@type&quot;:&quot;core-components-examples/components/pdfviewer&quot;,&quot;repo:modifyDate&quot;:&quot;2020-04-30T00:10:55Z&quot;}}">
    <div id="pdfviewer-97a46bd902-content" class="cmp-pdfviewer__content cmp-pdfviewer__full-window"></div>
  </div>
</div>
JSON:
{"id":"pdfviewer-97a46bd902","documentPath":"\/content\/dam\/core-components-examples\/library\/sample-assets\/Bodea Brochure.pdf","type":"FULL_WINDOW","defaultViewMode":"FIT_PAGE","borderless":false,"showAnnotationTools":false,"showFullScreen":true,"showLeftHandPanel":true,"showDownloadPdf":true,"showPrintPdf":true,"showPageControls":true,"dockPageControls":true,"clientId":"630681c60b144a498850fc22c1df83e0","documentFileName":"Bodea Brochure.pdf","viewerConfigJson":"{\"embedMode\":\"FULL_WINDOW\",\"defaultViewMode\":\"FIT_PAGE\",\"showAnnotationTools\":false,\"showLeftHandPanel\":true,\"showPageControls\":true,\"dockPageControls\":true,\"showDownloadPDF\":true,\"showPrintPDF\":true}","containerClass":"cmp-pdfviewer__full-window","reportSuiteId":"",":type":"core-components-examples\/components\/pdfviewer","dataLayer":{"pdfviewer-97a46bd902":{"@type":"core-components-examples\/components\/pdfviewer","repo:modifyDate":"2020-04-30T00:10:55Z"}}}
PostCSS: CSS: Title
Sized Container
Content

The sized container mode displays PDFs in a boxed container with landscape orientation. Best suited for presentations.

Result
Properties:
jcr:primaryType: nt:unstructured
jcr:createdBy: admin
showPrintPdf: true
dockPageControls: false
documentPath: /content/dam/core-components-examples/library/sample-assets/Bodea Brochure.pdf
jcr:lastModifiedBy: admin
defaultViewMode: FIT_PAGE
jcr:created:
type: SIZED_CONTAINER
showPageControls: false
showLeftHandPanel: true
showFullScreen: false
showDownloadPdf: true
jcr:lastModified:
showAnnotationTools: false
sling:resourceType: core-components-examples/components/pdfviewer
borderless: false
Markup:
<div class="pdfviewer">
  <div class="cmp-pdfviewer" id="pdfviewer-c5f6662102" data-cmp-client-id="630681c60b144a498850fc22c1df83e0" data-cmp-document-path="/content/dam/core-components-examples/library/sample-assets/Bodea Brochure.pdf" data-cmp-document-file-name="Bodea Brochure.pdf" data-cmp-viewer-config-json="{&quot;embedMode&quot;:&quot;SIZED_CONTAINER&quot;,&quot;showFullScreen&quot;:false,&quot;showPageControls&quot;:false,&quot;dockPageControls&quot;:false,&quot;showDownloadPDF&quot;:true,&quot;showPrintPDF&quot;:true}" data-cmp-data-layer="{&quot;pdfviewer-c5f6662102&quot;:{&quot;@type&quot;:&quot;core-components-examples/components/pdfviewer&quot;,&quot;repo:modifyDate&quot;:&quot;2020-04-30T00:11:46Z&quot;}}">
    <div id="pdfviewer-c5f6662102-content" class="cmp-pdfviewer__content cmp-pdfviewer__sized-container"></div>
  </div>
</div>
JSON:
{"id":"pdfviewer-c5f6662102","documentPath":"\/content\/dam\/core-components-examples\/library\/sample-assets\/Bodea Brochure.pdf","type":"SIZED_CONTAINER","defaultViewMode":"FIT_PAGE","borderless":false,"showAnnotationTools":false,"showFullScreen":false,"showLeftHandPanel":true,"showDownloadPdf":true,"showPrintPdf":true,"showPageControls":false,"dockPageControls":false,"clientId":"630681c60b144a498850fc22c1df83e0","documentFileName":"Bodea Brochure.pdf","viewerConfigJson":"{\"embedMode\":\"SIZED_CONTAINER\",\"showFullScreen\":false,\"showPageControls\":false,\"dockPageControls\":false,\"showDownloadPDF\":true,\"showPrintPDF\":true}","containerClass":"cmp-pdfviewer__sized-container","reportSuiteId":"",":type":"core-components-examples\/components\/pdfviewer","dataLayer":{"pdfviewer-c5f6662102":{"@type":"core-components-examples\/components\/pdfviewer","repo:modifyDate":"2020-04-30T00:11:46Z"}}}
PostCSS: CSS: Title
In-Line
Content

All PDF pages rendered in line within a web page. Best suited for reading applications.

Result
Properties:
jcr:primaryType: nt:unstructured
jcr:createdBy: admin
showPrintPdf: true
dockPageControls: true
documentPath: /content/dam/core-components-examples/library/sample-assets/Bodea Brochure.pdf
jcr:lastModifiedBy: admin
defaultViewMode: FIT_PAGE
jcr:created:
type: IN_LINE
showPageControls: true
showLeftHandPanel: true
showFullScreen: true
showDownloadPdf: true
jcr:lastModified:
showAnnotationTools: false
sling:resourceType: core-components-examples/components/pdfviewer
borderless: false
Markup:
<div class="pdfviewer">
  <div class="cmp-pdfviewer" id="pdfviewer-98746e7e01" data-cmp-client-id="630681c60b144a498850fc22c1df83e0" data-cmp-document-path="/content/dam/core-components-examples/library/sample-assets/Bodea Brochure.pdf" data-cmp-document-file-name="Bodea Brochure.pdf" data-cmp-viewer-config-json="{&quot;embedMode&quot;:&quot;IN_LINE&quot;,&quot;showDownloadPDF&quot;:true,&quot;showPrintPDF&quot;:true}" data-cmp-data-layer="{&quot;pdfviewer-98746e7e01&quot;:{&quot;@type&quot;:&quot;core-components-examples/components/pdfviewer&quot;,&quot;repo:modifyDate&quot;:&quot;2020-04-30T00:12:31Z&quot;}}">
    <div id="pdfviewer-98746e7e01-content" class="cmp-pdfviewer__content cmp-pdfviewer__in-line"></div>
  </div>
</div>
JSON:
{"id":"pdfviewer-98746e7e01","documentPath":"\/content\/dam\/core-components-examples\/library\/sample-assets\/Bodea Brochure.pdf","type":"IN_LINE","defaultViewMode":"FIT_PAGE","borderless":false,"showAnnotationTools":false,"showFullScreen":true,"showLeftHandPanel":true,"showDownloadPdf":true,"showPrintPdf":true,"showPageControls":true,"dockPageControls":true,"clientId":"630681c60b144a498850fc22c1df83e0","documentFileName":"Bodea Brochure.pdf","viewerConfigJson":"{\"embedMode\":\"IN_LINE\",\"showDownloadPDF\":true,\"showPrintPDF\":true}","containerClass":"cmp-pdfviewer__in-line","reportSuiteId":"",":type":"core-components-examples\/components\/pdfviewer","dataLayer":{"pdfviewer-98746e7e01":{"@type":"core-components-examples\/components\/pdfviewer","repo:modifyDate":"2020-04-30T00:12:31Z"}}}
PostCSS: CSS:

By mchavez

Hi, I am Michael Chavez, a web developer based in San Francisco, California. I started Space-Rocket in 2012 to make custom content management systems that are tailored to business needs.

Leave a comment

Your email address will not be published. Required fields are marked *