Document List Panel
This example shows how to add the Document List Panel to the DsPdfViewer, and fill it with the list of predefined PDFs that a user can load from URLs specified by the documentListUrl option.
app.js
index.html
styles.css
window.onload = function(){
//DsPdfViewer.LicenseKey = "***key***";
const options = {
workerSrc: "/document-solutions/javascript-pdf-viewer/demos/product-bundles/build/dspdfviewer.worker.js",
supportApi: getSupportApiSettings(),
restoreViewStateOnLoad: false
};
const baseAssetsPath = "/document-solutions/javascript-pdf-viewer/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 DsPdfViewer("#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.leftSidebar.menu.panels.open(documentListPanelHandle.id);
viewer.zoom = { mode: 2 };
});
viewer.open("/document-solutions/javascript-pdf-viewer/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>`;
}