window.onload = function(){
//DsPdfViewer.LicenseKey = "***key***";
const options = {
workerSrc: "/diodocs/pdfviewer/demos/product-bundles/build/dspdfviewer.worker.js",
supportApi: getSupportApiSettings(),
restoreViewStateOnLoad: false,
language: "ja"
};
options.documentListUrl = [
{
path: "/diodocs/pdfviewer/demos/product-bundles/assets/pdf/documents-list/financial-report.pdf",
title: "財務情報",
previewContent: renderPreviewCard("財務情報",
"財務・予算報告書を閲覧し、共同作業を行う",
"/diodocs/pdfviewer/demos/product-bundles/assets/images/preview/svg/Finance.svg")
},
{
path: "/diodocs/pdfviewer/demos/product-bundles/assets/pdf/documents-list/resumeWithImage.pdf",
title: "従業員情報",
previewContent: renderPreviewCard("従業員情報",
"従業員の履歴書を画像や複数のレイアウトにて作成・閲覧する",
"/diodocs/pdfviewer/demos/product-bundles/assets/images/preview/svg/Employee.svg")
},
{
path: "/diodocs/pdfviewer/demos/product-bundles/assets/pdf/documents-list/Real-Estate-Schedule-Form.pdf",
title: "不動産情報",
previewContent: renderPreviewCard("不動産情報",
"不動産情報の管理のために、契約条件、家主、テナントの詳細などを明細に追加する",
"/diodocs/pdfviewer/demos/product-bundles/assets/images/preview/svg/Real-Estate.svg")
},
{
path: "/diodocs/pdfviewer/demos/product-bundles/assets/pdf/documents-list/Return_ExchangeForm.pdf",
title: "電子商取引",
previewContent: renderPreviewCard("電子商取引",
"店頭での返品・交換の場合は、返品・交換フォームに記入する",
"/diodocs/pdfviewer/demos/product-bundles/assets/images/preview/svg/E-commerce.svg")
},
{
path: "/diodocs/pdfviewer/demos/product-bundles/assets/pdf/documents-list/news.pdf",
title: "メディア",
previewContent: renderPreviewCard("メディア",
"ニュースレターを閲覧する",
"/diodocs/pdfviewer/demos/product-bundles/assets/images/preview/svg/Media.svg")
},
{
path: "/diodocs/pdfviewer/demos/product-bundles/assets/pdf/documents-list/patientmedicalhistoryform.pdf",
title: "ヘルスケア",
previewContent: renderPreviewCard("ヘルスケア",
"患者の病歴をフォームに記入する",
"/diodocs/pdfviewer/demos/product-bundles/assets/images/preview/svg/Healthcare.svg")
},
{
path: "/diodocs/pdfviewer/demos/product-bundles/assets/pdf/documents-list/house-plan-layers.pdf",
title: "建築設計",
previewContent: renderPreviewCard("建築設計",
"配線を含む空調設定や照明プランなどの詳細な家の建築設計を確認する",
"/diodocs/pdfviewer/demos/product-bundles/assets/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("/diodocs/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="ja">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>ドキュメント一覧</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./src/styles.css">
<script src="/diodocs/pdfviewer/demos/product-bundles/build/dspdfviewer.js"></script>
<script src="/diodocs/pdfviewer/demos/product-bundles/build/wasmSupportApi.js"></script>
<script src="/diodocs/pdfviewer/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;
}
