react-pdf-js
react-pdf-watermark
provides a component for rendering PDF documents using mozilla/pdf.js
and ability to adding watermark to PDF. Written for React 15/16 and ES2015.
This package is originally built by mikecousins/react-pdf-js
with a number of enhancement:
- Added hook
onPageRenderComplete()
for determine whether the page is loaded onCanvas. - Watermark - For displaying watermark on top of original PDF.
- Add check handler for duplicated canvas load.
- Add custom pdf.worker file
Usage
Install with npm install react-pdf-watermark
Example
Use it in your app (showing some basic pagination as well):
;; Component state = {}; { this; } { this; } { let previousButton = <li className="previous" onClick=thishandlePrevious><a href="#"><i className="fa fa-arrow-left"></i> Previous</a></li>; if page === 1 previousButton = <li className="previous disabled"><a href="#"><i className="fa fa-arrow-left"></i> Previous</a></li>; let nextButton = <li className="next" onClick=thishandleNext><a href="#">Next <i className="fa fa-arrow-right"></i></a></li>; if page === pages nextButton = <li className="next disabled"><a href="#">Next <i className="fa fa-arrow-right"></i></a></li>; return <nav> <ul className="pager"> previousButton nextButton </ul> </nav> ; } { let pagination = null; if thisstatepages pagination = this; return <div> <PDF file="test.pdf" page=thisstatepage watermark="WATERMARK GOES HERE.." watermarkOptions= transparency: 05 fontSize: 55 fontStyle: 'Bold' fontFamily: 'Arial' onDocumentComplete= { /* Do anything on document loaded like remove loading, etc */ } onPageRenderComplete= this /> pagination </div> } ;
Custom Watermark Styling
For more watermark styling, you can customize it yourself by creating watermark render function that will receipt canvas and context as params.
... { contextglobalAlpha = 015 contextfont = '55px bold Arial' context context // Rotate watermark to show diagonally const text = 'Strictly Confidential. Not to be circulated' metrics = context context } ...
And then apply it to your PDF component:
<PDF file="test.pdf" ... watermark=thisapplyWatermark />