I am looking to append a watermark div to the webviewer in a certain position using the following code in ReaderControl.js:
////Example of inserting custom content on top of a page
////==============================================================
me.docViewer.on('pageComplete', function (e, pageIndex) {
var totalpage = me.docViewer.GetPageCount();
var canvasid = null;
canvasid = "#canvas" + pageIndex.toString();
var canvasheight = me.getPageContainer(pageIndex)[0].clientHeight;
var canvaswidth = me.getPageContainer(pageIndex)[0].clientWidth;
var height = parseInt(canvasheight);
var width = parseInt(canvaswidth);
var pageContainer = me.getPageContainer(pageIndex);
pageContainer.append('<div style="width: ' + width + 'px; height: ' + height + 'px;overflow: hidden;z-index: 30;'
+ 'position: relative; display: table-cell;'
+ 'text-align: center; vertical-align: top;">'
+ '<div id="fitin" style="width: ' + width / 1.5 + 'px; height: ' + height / 6 + 'px;overflow: hidden;'
+ 'font-size: 50px; margin: 0 auto; text-align: center;">'
+ ' <div style="position: absolute;opacity:0.8;color:gray">Watermark sample Text</div>'
+ ' </div></div>');
if (me.hideAnnotations) {
var pageAnnotCanvas = me.docViewer.getAuxiliaryCanvas(pageIndex);
$(pageAnnotCanvas).hide();
}
me.fireEvent("pageCompleted", [pageIndex + 1]);
});
I am trying to prints the page, dynamic watermark is not displayed.
How would I add a dynamic watermark when printing the pages?