Skip to content

Commit 992dc02

Browse files
sashamilenkovicsashamilenkovic
committed
feat: adds watermarks page
1 parent 53f726d commit 992dc02

File tree

84 files changed

+3409
-14
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

84 files changed

+3409
-14
lines changed

‎frameworks/angular/TS/src/app/app.routes.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,13 @@ import { BasicViewerPageComponent } from "./pages/basic-viewer-page/basic-viewer
22
import { CustomOverlaysPageComponent } from "./pages/custom-overlays-page/custom-overlays-page.component";
33
import { HomePageComponent } from "./pages/home-page/home-page.component";
44
import { MagazineModePageComponent } from "./pages/magazine-mode-page/magazine-mode-page.component";
5+
import { WatermarksPageComponent } from "./pages/watermarks-page/watermarks-page.component";
56

67
export const routes = [
78
{ path: "", component: HomePageComponent },
89
{ path: "basic-viewer", component: BasicViewerPageComponent },
910
{ path: "magazine-mode", component: MagazineModePageComponent },
1011
{ path: "custom-overlays", component: CustomOverlaysPageComponent },
12+
{ path: "watermarks", component: WatermarksPageComponent },
1113
{ path: "**", redirectTo: "" },
1214
];

‎frameworks/angular/TS/src/app/nutrient/watermarks/implementation.ts‎

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
import type NutrientViewer from "@nutrient-sdk/viewer";
2+
import type { Configuration } from "@nutrient-sdk/viewer";
3+
import { nutrientConfig } from "../nutrient-config";
4+
5+
/**
6+
* Load a PDF viewer with watermark rendering
7+
* @param nutrientViewer - The NutrientViewer object (from CDN)
8+
* @param container - The container element to mount the viewer
9+
* @param document - URL to the PDF document
10+
*/
11+
export function loadWatermarksViewer(
12+
nutrientViewer: typeof NutrientViewer,
13+
container: HTMLElement,
14+
document = nutrientConfig.documentUrl,
15+
) {
16+
const config = {
17+
container,
18+
document,
19+
...(nutrientConfig.baseUrl && { baseUrl: nutrientConfig.baseUrl }),
20+
};
21+
22+
// Load the viewer with watermark configuration
23+
return load(nutrientViewer, config);
24+
}
25+
26+
/**
27+
* Internal load function with watermark rendering configuration
28+
* @param nutrientViewer - The NutrientViewer object
29+
* @param defaultConfiguration - Base configuration object
30+
*/
31+
async function load(
32+
nutrientViewer: typeof NutrientViewer,
33+
defaultConfiguration: Configuration,
34+
) {
35+
return nutrientViewer
36+
.load({
37+
...defaultConfiguration,
38+
// By using the RenderPageCallback https://www.nutrient.io/api/web/PSPDFKit.html#.RenderPageCallback
39+
// we can define a canvas that we want to render on a page.
40+
// This can be used to render watermarks, since it overlays the content
41+
// and also is part of the printed PDF.
42+
renderPageCallback(ctx, pageIndex, pageSize) {
43+
// Add a "Confidential" Watermark in the page
44+
ctx.translate(pageSize.width / 2 - 325, pageSize.height / 2 + 250);
45+
ctx.rotate(-0.25 * Math.PI);
46+
47+
ctx.font = "90px Arial";
48+
ctx.fillStyle = "rgba(76, 130, 212,.2)";
49+
ctx.fillText("CONFIDENTIAL", 100, 50);
50+
},
51+
})
52+
.then((instance) => {
53+
console.log("Nutrient Web SDK successfully loaded with watermarks!!");
54+
return instance;
55+
});
56+
}
57+
58+
/**
59+
* Unload the watermarks viewer from a container
60+
*
61+
* @param nutrientViewer - The NutrientViewer object (from CDN)
62+
* @param container - The container element
63+
*/
64+
export function unloadWatermarksViewer(
65+
nutrientViewer: typeof NutrientViewer,
66+
container: HTMLElement,
67+
) {
68+
nutrientViewer.unload(container);
69+
}

‎frameworks/angular/TS/src/app/pages/home-page/home-page.component.ts‎

Lines changed: 12 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -61,9 +61,7 @@ interface Example {
6161
</ul>
6262
6363
<div class="button-container">
64-
<a [routerLink]="example.path" class="view-button">
65-
View
66-
</a>
64+
<a [routerLink]="example.path" class="view-button"> View </a>
6765
</div>
6866
</div>
6967
</div>
@@ -115,5 +113,16 @@ export class HomePageComponent {
115113
"Video embedding",
116114
],
117115
},
116+
{
117+
path: "/watermarks",
118+
title: "Watermarks",
119+
description: "Add watermarks to PDFs using JavaScript",
120+
features: [
121+
"Custom watermark text",
122+
"Watermark rotation",
123+
"Transparency control",
124+
"Print integration",
125+
],
126+
},
118127
];
119128
}

‎frameworks/angular/TS/src/app/pages/watermarks-page/watermarks-page.component.ts‎

Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
import {
2+
type AfterViewInit,
3+
Component,
4+
type ElementRef,
5+
type OnDestroy,
6+
ViewChild,
7+
} from "@angular/core";
8+
import { RouterLink } from "@angular/router";
9+
import { loadNutrientViewer } from "../../../nutrient/loadNutrientViewer";
10+
import {
11+
loadWatermarksViewer,
12+
unloadWatermarksViewer,
13+
} from "../../../nutrient/watermarks/implementation";
14+
15+
@Component({
16+
selector: "app-watermarks-page",
17+
standalone: true,
18+
imports: [RouterLink],
19+
template: `
20+
<div class="basic-viewer-container">
21+
<nav class="basic-viewer-nav">
22+
<a routerLink="/" class="basic-viewer-back-link">
23+
← Back to Examples
24+
</a>
25+
<h2 class="basic-viewer-title">Watermarks</h2>
26+
<span class="basic-viewer-subtitle">
27+
Add watermarks to PDFs using JavaScript
28+
</span>
29+
</nav>
30+
31+
<div #container class="basic-viewer-content"></div>
32+
</div>
33+
`,
34+
styleUrls: ["../basic-viewer-page/basic-viewer-page.component.css"],
35+
})
36+
export class WatermarksPageComponent implements AfterViewInit, OnDestroy {
37+
@ViewChild("container", { static: true }) containerRef!: ElementRef;
38+
39+
private nutrientViewer!: Awaited<ReturnType<typeof loadNutrientViewer>>;
40+
41+
async ngAfterViewInit() {
42+
const container = this.containerRef.nativeElement;
43+
if (!container) return;
44+
45+
try {
46+
this.nutrientViewer = await loadNutrientViewer();
47+
48+
// Unload any existing instance
49+
unloadWatermarksViewer(this.nutrientViewer, container);
50+
51+
await loadWatermarksViewer(this.nutrientViewer, container);
52+
} catch (error) {
53+
console.error("Failed to load Nutrient Viewer:", error);
54+
}
55+
}
56+
57+
ngOnDestroy() {
58+
if (this.nutrientViewer && this.containerRef?.nativeElement) {
59+
unloadWatermarksViewer(
60+
this.nutrientViewer,
61+
this.containerRef.nativeElement,
62+
);
63+
}
64+
}
65+
}

‎frameworks/next/JS/app/page.jsx‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,17 @@ function HomePage() {
3333
"Video embedding",
3434
],
3535
},
36+
{
37+
path: "/watermarks",
38+
title: "Watermarks",
39+
description: "Add watermarks to PDFs using JavaScript",
40+
features: [
41+
"Custom watermark text",
42+
"Watermark rotation",
43+
"Transparency control",
44+
"Print integration",
45+
],
46+
},
3647
];
3748

3849
return (

‎frameworks/next/JS/app/watermarks/page.jsx‎

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
"use client";
2+
3+
import Link from "next/link";
4+
import { useEffect, useRef } from "react";
5+
import { loadNutrientViewer } from "../../nutrient/loadNutrientViewer";
6+
import {
7+
loadWatermarksViewer,
8+
unloadWatermarksViewer,
9+
} from "../../nutrient/watermarks/implementation";
10+
import "../basic-viewer/BasicViewerPage.css";
11+
12+
function WatermarksPage() {
13+
const containerRef = useRef(null);
14+
15+
useEffect(() => {
16+
const container = containerRef.current;
17+
18+
if (!container) return;
19+
20+
let nutrientViewer = null;
21+
22+
(async () => {
23+
nutrientViewer = await loadNutrientViewer();
24+
25+
if (container && nutrientViewer) {
26+
loadWatermarksViewer(nutrientViewer, container);
27+
}
28+
})();
29+
30+
return () => {
31+
if (nutrientViewer && container) {
32+
unloadWatermarksViewer(nutrientViewer, container);
33+
}
34+
};
35+
}, []);
36+
37+
return (
38+
<div className="basic-viewer-container">
39+
<nav className="basic-viewer-nav">
40+
<Link href="/" className="basic-viewer-back-link">
41+
← Back to Examples
42+
</Link>
43+
<h2 className="basic-viewer-title">Watermarks</h2>
44+
<span className="basic-viewer-subtitle">
45+
Add watermarks to PDFs using JavaScript
46+
</span>
47+
</nav>
48+
49+
<div ref={containerRef} className="basic-viewer-content" />
50+
</div>
51+
);
52+
}
53+
54+
export default WatermarksPage;

‎frameworks/next/JS/nutrient/watermarks/implementation.js‎

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
import { nutrientConfig } from "../nutrient-config.js";
2+
3+
/**
4+
* Load a PDF viewer with watermark rendering
5+
* @param nutrientViewer - The NutrientViewer object (from CDN or package)
6+
* @param container - The container element to mount the viewer
7+
* @param document - URL to the PDF document
8+
*/
9+
export function loadWatermarksViewer(
10+
nutrientViewer,
11+
container,
12+
document = nutrientConfig.documentUrl,
13+
) {
14+
const config = {
15+
container,
16+
document,
17+
...(nutrientConfig.baseUrl && { baseUrl: nutrientConfig.baseUrl }),
18+
};
19+
20+
// Load the viewer with watermark configuration
21+
return load(nutrientViewer, config);
22+
}
23+
24+
/**
25+
* Internal load function with watermark rendering configuration
26+
* @param nutrientViewer - The NutrientViewer object
27+
* @param defaultConfiguration - Base configuration object
28+
*/
29+
async function load(nutrientViewer, defaultConfiguration) {
30+
return nutrientViewer
31+
.load({
32+
...defaultConfiguration,
33+
// By using the RenderPageCallback https://www.nutrient.io/api/web/PSPDFKit.html#.RenderPageCallback
34+
// we can define a canvas that we want to render on a page.
35+
// This can be used to render watermarks, since it overlays the content
36+
// and also is part of the printed PDF.
37+
renderPageCallback(ctx, pageIndex, pageSize) {
38+
// Add a "Confidential" Watermark in the page
39+
ctx.translate(pageSize.width / 2 - 325, pageSize.height / 2 + 250);
40+
ctx.rotate(-0.25 * Math.PI);
41+
42+
ctx.font = "90px Arial";
43+
ctx.fillStyle = "rgba(76, 130, 212,.2)";
44+
ctx.fillText("CONFIDENTIAL", 100, 50);
45+
},
46+
})
47+
.then((instance) => {
48+
console.log("Nutrient Web SDK successfully loaded with watermarks!!");
49+
return instance;
50+
});
51+
}
52+
53+
/**
54+
* Unload the watermarks viewer from a container
55+
*
56+
* @param nutrientViewer - The NutrientViewer object (from CDN or package)
57+
* @param container - The container element
58+
*/
59+
export function unloadWatermarksViewer(nutrientViewer, container) {
60+
nutrientViewer.unload(container);
61+
}

‎frameworks/next/JS/src/nutrient/watermarks/implementation.js‎

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
import { nutrientConfig } from "../nutrient-config.js";
2+
3+
/**
4+
* Load a PDF viewer with watermark rendering
5+
* @param nutrientViewer - The NutrientViewer object (from CDN or package)
6+
* @param container - The container element to mount the viewer
7+
* @param document - URL to the PDF document
8+
*/
9+
export function loadWatermarksViewer(
10+
nutrientViewer,
11+
container,
12+
document = nutrientConfig.documentUrl,
13+
) {
14+
const config = {
15+
container,
16+
document,
17+
...(nutrientConfig.baseUrl && { baseUrl: nutrientConfig.baseUrl }),
18+
};
19+
20+
// Load the viewer with watermark configuration
21+
return load(nutrientViewer, config);
22+
}
23+
24+
/**
25+
* Internal load function with watermark rendering configuration
26+
* @param nutrientViewer - The NutrientViewer object
27+
* @param defaultConfiguration - Base configuration object
28+
*/
29+
async function load(nutrientViewer, defaultConfiguration) {
30+
return nutrientViewer
31+
.load({
32+
...defaultConfiguration,
33+
// By using the RenderPageCallback https://www.nutrient.io/api/web/PSPDFKit.html#.RenderPageCallback
34+
// we can define a canvas that we want to render on a page.
35+
// This can be used to render watermarks, since it overlays the content
36+
// and also is part of the printed PDF.
37+
renderPageCallback(ctx, pageIndex, pageSize) {
38+
// Add a "Confidential" Watermark in the page
39+
ctx.translate(pageSize.width / 2 - 325, pageSize.height / 2 + 250);
40+
ctx.rotate(-0.25 * Math.PI);
41+
42+
ctx.font = "90px Arial";
43+
ctx.fillStyle = "rgba(76, 130, 212,.2)";
44+
ctx.fillText("CONFIDENTIAL", 100, 50);
45+
},
46+
})
47+
.then((instance) => {
48+
console.log("Nutrient Web SDK successfully loaded with watermarks!!");
49+
return instance;
50+
});
51+
}
52+
53+
/**
54+
* Unload the watermarks viewer from a container
55+
*
56+
* @param nutrientViewer - The NutrientViewer object (from CDN or package)
57+
* @param container - The container element
58+
*/
59+
export function unloadWatermarksViewer(nutrientViewer, container) {
60+
nutrientViewer.unload(container);
61+
}

‎frameworks/next/TS/app/page.tsx‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -40,6 +40,17 @@ function HomePage() {
4040
"Video embedding",
4141
],
4242
},
43+
{
44+
path: "/watermarks",
45+
title: "Watermarks",
46+
description: "Add watermarks to PDFs using JavaScript",
47+
features: [
48+
"Custom watermark text",
49+
"Watermark rotation",
50+
"Transparency control",
51+
"Print integration",
52+
],
53+
},
4354
];
4455

4556
return (

0 commit comments

Comments
 (0)