WebViewer is a powerful JavaScript-based PDF Library that's part of the PDFTron PDF SDK. It provides a slick out-of-the-box responsive UI that interacts with the core library to view, annotate and manipulate PDFs that can be embedded into any web project.

CanvasToPDF is a PDF Library that allows users to create vector appearances with Canvas API. In other words, enable you to export your HTML Canvas to a vector quality PDF.

This repo is specifically designed for any users interested in integrating WebViewer and CanvasToPDF into React project.

In the App.js file, you will see several sample draw functions already implemented to see how the CanvasToPDF api can be used.

There are 5 sample draw functions:

• drawRect
• drawGradientCircles
• drawTriangles
• drawHatch
• drawTiger

const blob = await canvasToPDF(drawGradientCircles, {
  width: rectangleAnnot.Width,
  height: rectangleAnnot.Height,
});

You can use them by replacing the above code to the below code like this:

const blob = await canvasToPDF(drawHatch, {
  width: rectangleAnnot.Width,
  height: rectangleAnnot.Height,
});

Before you begin, make sure your development environment includes Node.js.

git clone https://github.com/ajo01/canvasToPDF-webviewer-react-sample.git
cd webviewer-react-sample
npm install

npm start

After the app starts, you will be able to see WebViewer running on localhost:3006.

Run npm run build to build the project. The build artifacts will be stored in the build/ directory. See the section about deployment for more information.

To test the build directory locally you can use serve or http-server. In case of serve, by default it strips the .html extension stripped from paths. We added serve.json configuration to disable cleanUrls option.

You can deploy your app to GitHub Pages. To do so, make sure to update paths accordingly, for example, to deploy on pdftron.github.io/webviewer-react-sample, modify the path:

WebViewer(
 {
   path: '/webviewer-react-sample/webviewer/lib',
   initialDoc: '/webviewer-react-sample/files/PDFTRON_about.pdf',
 },
 viewer.current,
).then((instance) => {

See API documentation.

See contributing.

See license.