// Initialize PDF viewer with default configuration
window.onload = function () {
// Configuration constants
const CONFIG = {
initialDocument: "/document-solutions/javascript-pdf-viewer/demos/product-bundles/assets/pdf/redact-preview.pdf",
userName: "Document Reviewer"
};
// State management
const state = {
viewer: null,
React: null,
isRedactionPreview: false
};
try {
// 1. Initialize viewer and setup interface
state.viewer = new DsPdfViewer("#viewer", {
userName: CONFIG.userName
});
// 2. Set up default interface
state.viewer.addDefaultPanels();
state.viewer.toggleSidebar(false);
// 3. Get React instance
state.React = state.viewer.getType("React");
if (!state.React) {
console.warn("React instance not found in viewer");
return;
}
// Create eye icon SVG for the toggle button
const createEyeIcon = () => state.React.createElement(
"svg",
{
xmlns: "http://www.w3.org/2000/svg",
width: "24",
height: "24",
viewBox: "0 0 24 24",
fill: state.isRedactionPreview ? "#ff0000" : "#008000",
"aria-hidden": "true"
},
state.React.createElement("path", {
d: "M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z"
})
);
// Toggle redaction preview mode
const toggleRedactionPreview = () => {
state.isRedactionPreview = !state.isRedactionPreview;
state.viewer.removeViewAreaStyle("redaction-preview-style");
if (state.isRedactionPreview) {
state.viewer.addViewAreaStyle(`
.redactAnnotation .trigger {
background: none !important;
border: 2px dashed rgba(255, 0, 0, 0.5) !important;
box-shadow: inset 0 0 8px rgba(255, 0, 0, 0.3);
}
.redactAnnotation .trigger *,
.redactAnnotation .trigger img {
display: none !important;
}
`, "redaction-preview-style");
}
state.viewer.toolbar.updateItem("preview-content", {
icon: {
type: "svg",
content: createEyeIcon()
},
title: state.isRedactionPreview
? "Hide redacted content (secure mode)"
: "Preview redacted content (review mode)"
});
};
// Add custom preview button to toolbar
state.viewer.toolbar.addItem({
key: "preview-content",
icon: {
type: "svg",
content: createEyeIcon()
},
title: "Preview redacted content (review mode)",
enabled: true,
action: toggleRedactionPreview
});
// Position the button
state.viewer.toolbarLayout.viewer.default.unshift("preview-content");
state.viewer.toolbarLayout.viewer.mobile.unshift("preview-content");
// Load initial document
state.viewer.open(CONFIG.initialDocument);
} catch (error) {
console.error("PDF viewer initialization error:", error);
}
};
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>PDF Redaction Preview Mode with CSS Customization</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%; }
