https://github.com/jimmy-js/react-pdf-watermark

Provide react component for rendering PDF document with Watermark
https://github.com/jimmy-js/react-pdf-watermark

Last synced: about 1 year ago
JSON representation

Provide react component for rendering PDF document with Watermark

• Host: GitHub
• URL: https://github.com/jimmy-js/react-pdf-watermark
• Owner: Jimmy-JS
• Created: 2019-04-04T11:21:21.000Z (about 7 years ago)
• Default Branch: master
• Last Pushed: 2022-12-03T04:44:11.000Z (over 3 years ago)
• Last Synced: 2025-03-29T08:02:45.797Z (about 1 year ago)
• Language: JavaScript
• Homepage:
• Size: 169 KB
• Stars: 7
• Watchers: 1
• Forks: 2
• Open Issues: 7
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# 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):

```js

import React from 'react';

import PDF from 'react-pdf-watermark';

class MyPdfViewer extends React.Component {

  state = {};

  handlePrevious = () => {

    this.setState({ page: this.state.page - 1 });

  }

  handleNext = () => {

    this.setState({ page: this.state.page + 1 });

  }

  renderPagination = (page, pages) => {

    let previousButton = 
 Previous
;

    if (page === 1) {

      previousButton = 
 Previous
;

    }

    let nextButton = 
Next 
;

    if (page === pages) {

      nextButton = 
Next 
;

    }

    return (

      

        


          {previousButton}

          {nextButton}

        

      

    );

  }


  render() {

    let pagination = null;

    if (this.state.pages) {

      pagination = this.renderPagination(this.state.page, this.state.pages);

    }

    return (

      


         { /* Do anything on document loaded like remove loading, etc */ }}

          onPageRenderComplete={(pages, page) => this.setState({ page, pages })}

        />

        {pagination}

      

    )

  }

}


export default MyPdfViewer;

```

## 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.

```js

  ...

  applyWatermark = (canvas, context) => {

    context.globalAlpha = 0.15

    context.font = '55px bold Arial'

    context.translate(canvas.width / 2, canvas.height / 2)

    context.rotate(-Math.atan(canvas.height / canvas.width)) // Rotate watermark to show diagonally

    const text = 'Strictly Confidential. Not to be circulated'

    metrics = context.measureText(text)

    context.fillText(text, -metrics.width / 2, (55 / 2))

  }

  ...

```

And then apply it to your PDF component:

```js

  

```