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>`;
}
<!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="/document-solutions/javascript-pdf-viewer/demos/product-bundles/build/dspdfviewer.js"></script>
<script src="/document-solutions/javascript-pdf-viewer/demos/product-bundles/build/wasmSupportApi.js"></script>
<script src="/document-solutions/javascript-pdf-viewer/demos/resource/js/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;
}
