window.onload = function () {
//DsPdfViewer.LicenseKey = "***key***";
var viewer = new DsPdfViewer('#viewer', { restoreViewStateOnLoad: false });
viewer.addDefaultPanels();
var pdf = "/document-solutions/javascript-pdf-viewer/demos/product-bundles/assets/pdf/wetlands.pdf";
viewer.open(pdf).then(async function () {
// Highlight text segments on a specific page:
// Highlight the word "Introduction" in the title at the start of the document:
await viewer.highlightTextSegment(0, 0, 12, {
color: 'rgba(255, 255, 0, 0.3)', // Semi-transparent yellow fill
borderColor: 'rgba(255, 165, 0, 0.6)', // Semi-transparent orange border
borderWidth: 1
});
// Highlight the word "Wetlands" in the title with custom colors and no border:
await viewer.highlightTextSegment(0, 30, 38, {
color: 'rgba(0, 255, 0, 0.3)', // Semi-transparent green fill
borderWidth: 0 // No border
});
// Access the highlight manager to create custom highlights:
const highlightManager = viewer.highlightManager;
// Define custom highlights using specific rectangle coordinates on a PDF page
const customHighlights = {
// Page reference notes:
// - PDF page dimensions are 612pt wide and 792pt tall.
// - The origin (0, 0) is at the bottom-left corner of the page.
// - X-coordinates increase to the right.
// - Y-coordinates increase upwards.
// The array 'rects' specifies areas to highlight on the page using rectangles.
// Rectangles can be defined in two formats:
// 1. Using two points to represent the bottom-left and top-right corners: [x1, y1, x2, y2].
// 2. Using the position (x, y) of the bottom-left corner and specifying width (w) and height (h): {x, y, w, h}.
rects: [
[226, 682, 318, 694], // Rectangle for the text "The Importance".
// Defined using corner coordinates: [bottom-left x, bottom-left y, top-right x, top-right y].
// Width is the difference between x2 and x1, height is the difference between y2 and y1.
{ x: 242, y: 581, w: 137, h: 18 }, // Rectangle for the text "two point three (2.3) million".
// Defined using bottom-left corner position (x, y) and dimensions (w, h).
// 'x' is 242 points from the left edge, 'y' is 599 points above the bottom edge.
// Width 'w' extends 137 points to the right, height 'h' extends 18 points upwards.
{ x: 220, y: 563, w: 100, h: 16 } // Rectangle for the text "twelve percent (12%)".
// Similarly defined with bottom-left corner (x, y) at 220 points from the left and 579 points up from the bottom.
// Extends 100 points to the right and 16 points up.
],
// Highlight styling options:
color: 'rgba(255, 0, 0, 0.2)', // Fill color for highlights: semi-transparent red.
// The RGBA format (Red, Green, Blue, Alpha) specifies color and transparency, with alpha (0.2) controlling the transparency level.
borderColor: 'rgba(0, 0, 255, 0.6)', // Border color for highlights: semi-transparent blue.
// Also uses RGBA format with alpha (0.6) for semi-transparency.
borderWidth: 1 // Border thickness: 1pt.
// Specifies a thin border around each highlighted rectangle.
};
// Add custom highlights to page 1:
highlightManager.addHighlight(0, customHighlights);
// Highlighting important terms across multiple pages:
// Highlight "wildlife species" on page 1:
await viewer.highlightTextSegment(0, 300, 307, {
color: 'rgba(173, 216, 230, 0.4)', // Light blue fill
borderColor: 'rgba(0, 0, 139, 0.7)', // Dark blue border
borderWidth: 2
});
// Highlight "oxygen" on page 2
viewer.highlightTextSegment(1, 23, 29, {
color: 'rgba(255, 99, 71, 0.4)', // Tomato fill
borderColor: 'rgba(139, 0, 0, 0.7)', // Dark red border
borderWidth: 2
});
// Adding a custom highlight with a custom paint handler (optional):
// Notes on coordinate system and page dimensions:
// - PDF page dimensions: width = 612pt, height = 792pt.
// - The origin (0, 0) is located at the bottom-left corner of the page.
const customHighlight = {
pageIndex: 0, // Specifies the page number where the highlight should be applied (0-based index).
rects: [{ x: 500, y: 780, w: 100, h: 100 }], // Defines a rectangle at the top-right corner of the page.
// Coordinates are based on PDF's coordinate system:
// - 'x' is 500pt from the left edge.
// - 'y' is 780pt up from the bottom edge.
// - 'w' (width) extends 100pt to the right.
// - 'h' (height) extends 100pt upwards.
// The 'paintHandler' function provides custom rendering logic for highlights.
paintHandler: (ctx, highlight) => {
// Note: The PDF coordinate system starts with the origin at the bottom-left corner.
// However, canvas drawing operations typically use a coordinate system with the origin at the top-left corner.
// Therefore, coordinates must be converted when drawing on a canvas:
// - You need to flip the Y-axis and adjust for any zoom applied to the PDF page.
// The 'applyViewPortScale' method handles this conversion automatically, translating
// the PDF coordinates into the canvas coordinate space based on the current zoom level of the page.
const scaledRect = viewer.applyViewPortScale(highlight.rects[0], highlight.pageIndex); // Convert PDF coordinates to canvas coordinates.
const { x, y, w, h } = scaledRect; // Destructure the converted coordinates for use in canvas drawing.
// Set up styles
ctx.strokeStyle = highlight.borderColor || 'rgba(255, 165, 0, 0.8)'; // Orange border
ctx.lineWidth = highlight.borderWidth || 3;
ctx.fillStyle = highlight.color || 'rgba(255, 215, 0, 0.5)'; // Gold fill
// Draw an ellipse (for signature-like shape):
ctx.beginPath();
ctx.ellipse(x + w / 2, y + h / 2, w / 2, h / 2, 0, 0, 2 * Math.PI);
ctx.fill();
ctx.stroke();
// Draw a star inside the ellipse:
const centerX = x + w / 2;
const centerY = y + h / 2;
const outerRadius = w / 4;
const innerRadius = outerRadius / 2;
const points = 5;
ctx.beginPath();
for (let i = 0; i < points; i++) {
const angle = (Math.PI / points) * i * 2;
const xOuter = centerX + Math.cos(angle) * outerRadius;
const yOuter = centerY - Math.sin(angle) * outerRadius;
ctx.lineTo(xOuter, yOuter);
const xInner = centerX + Math.cos(angle + Math.PI / points) * innerRadius;
const yInner = centerY - Math.sin(angle + Math.PI / points) * innerRadius;
ctx.lineTo(xInner, yInner);
}
ctx.closePath();
ctx.fillStyle = 'rgba(255, 69, 0, 0.7)'; // Red-Orange for the star
ctx.fill();
ctx.strokeStyle = 'rgba(255, 99, 71, 0.9)'; // Tomato color for the star border
ctx.stroke();
}
};
// Add the custom highlight with the custom paint handler to the first page:
highlightManager.addHighlight(customHighlight.pageIndex, customHighlight);
// Manually repaint the text layer to apply custom highlights (if not already done)
//highlightManager.repaintTextLayer();
// Clear highlights on the first page
//viewer.clearHighlightedSegments([0]);
});
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Applying Custom Highlights to Specific Text Portions</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%;
}
