Document List Panel

This example shows how to add the Document List Panel to the GcPdfViewer, and fill it with the list of predefined PDFs that a user can load from URLs specified by the documentListUrl option.

window.onload = function(){ //GcPdfViewer.LicenseKey = "***key***"; const options = { workerSrc: "/documents-api-pdfviewer/demos/product-bundles/build/gcpdfviewer.worker.js", supportApi: { apiUrl:, token:, webSocketUrl: false }, restoreViewStateOnLoad: false }; const baseAssetsPath = "/documents-api-pdfviewer/demos/product-bundles/assets/"; options.documentListUrl = [ { path: baseAssetsPath + "pdf/documents-list/financial-report.pdf", title: "Finance", previewContent: renderPreviewCard("Finance", "View Financial, budget reports and collaborate over them.", baseAssetsPath + "images/preview/svg/Finance.svg") }, { path: baseAssetsPath + "pdf/documents-list/resumeWithImage.pdf", title: "Employee", previewContent: renderPreviewCard("Employee", "Create or view Employee resumes with images and multiple layouts.", baseAssetsPath + "images/preview/svg/Employee.svg") }, { path: baseAssetsPath + "pdf/documents-list/Real-Estate-Schedule-Form.pdf", title: "Real Estate", previewContent: renderPreviewCard("Real Estate", "Automate your real-estate document workflow, add terms and conditions, landlord or tenant details, and more.", baseAssetsPath + "images/preview/svg/Real-Estate.svg") }, { path: baseAssetsPath + "pdf/documents-list/Return_ExchangeForm.pdf", title: "E-commerce", previewContent: renderPreviewCard("E-commerce", "Fill out the Return/Exchange form for returning or exchanging articles at a store.", baseAssetsPath + "images/preview/svg/E-commerce.svg") }, { path: baseAssetsPath + "pdf/documents-list/news.pdf", title: "Media", previewContent: renderPreviewCard("Media", "View newsletters, media articles in multiple languages and columnar formats.", baseAssetsPath + "images/preview/svg/Media.svg") }, { path: baseAssetsPath + "pdf/documents-list/patientmedicalhistoryform.pdf", title: "Healthcare", previewContent: renderPreviewCard("Healthcare", "Fill out this confidential medical history form for a patient.", baseAssetsPath + "images/preview/svg/Healthcare.svg") }, { path: baseAssetsPath + "pdf/documents-list/house-plan-layers.pdf", title: "Architecture", previewContent: renderPreviewCard("Architecture", "View detailed architecture of house, data, HVAC, lighting plans and more.", baseAssetsPath + "images/preview/svg/Architecture.svg") } ]; options.friendlyFileName = ''; const viewer = new GcPdfViewer("#viewer", options); viewer.addDefaultPanels(); const viewerDefault = viewer.toolbarLayout.viewer.default; viewerDefault.splice(viewerDefault.indexOf("open"), 1); const documentListPanelHandle = viewer.addDocumentListPanel(); viewer.onAfterOpen.register(function() {; viewer.zoom = { mode: 2 }; });"/documents-api-pdfviewer/demos/product-bundles/assets/pdf/documents-list/financial-report.pdf"); } function renderPreviewCard(displayName, description, imgSrc) { return `<button class="preview-card gc-btn"> <div class="column"><img src="${imgSrc}"><h2>${displayName}</h2><p>${description}</p></div> </button>`; }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>Document List</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="./src/styles.css"> <script src="/documents-api-pdfviewer/demos/product-bundles/build/gcpdfviewer.js"></script> <script src="/documents-api-pdfviewer/demos/product-bundles/build/init.js"></script> <script src="./src/app.js"></script> </head> <body> <div id="viewer"></div> </body> </html>
#viewer { height: 100%; } .preview-card.gc-btn { position: relative; display: block; min-height: 120px; height: auto; width: 100%; overflow: hidden; cursor: pointer; position: relative; } .preview-card .column img { width: 70px; height: 70px; margin: 0; position: absolute; left: 6px; } .preview-card .column { width: calc(100% - 83px); padding: 0px 3px 3px 0px; line-height: 16px; margin-left: 80px; } .preview-card .column h2 { padding: 0px 3px 0px 0px; margin: 6px 0px 0px 3px; height: 18px; font-size: 14px; white-space: nowrap; width: 100%; display: block; text-overflow: ellipsis; overflow: hidden; } .preview-card .column p { margin: 0px 0px 0px 3px; padding: 0px 3px 0px 0px; width: 100%; display: block; overflow: hidden; text-overflow: ellipsis; }