pdftron / webviewer-react-sample

Sample to demonstrate integrating WebViewer into React

WebViewer - React sample

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.

This repo is specifically designed for any users interested in integrating WebViewer into React project. You can watch a video here to help you get started.

Demos

• Customizable out-of-the-box UI
• PDF Viewer
• DOCX Editor
• Annotation & Markup
• Generate PDFs from DOCX template
• Digital Signatures
• PDF Text Editing
• Page Manipulation
• Redaction
• Form Building
• Annotate Videos
• More

Trial

WebViewer comes with a 7-day trial without any feature limitations or trial key needed. To extend the trial, you can obtain the trial key by signing-up on our developer portal.

Initial setup

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

This sample requires Node version 18.0.0 or higher. To check your version, run node -v in a terminal/console window.

Install

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

Run

npm start

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

Build

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.

GitHub Pages

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) => {

WebViewer APIs

See API documentation.

Contributing

See contributing.

License

See license.

webviewer-react-sample's Issues

network failure when run it on localhost

Feature Request: WebViewer - Instance Creator - Iframe on Sharepoint

The usecase is an React app, which is served on sharepoint. On sharepoint "html" endings are not served by the browser. In consequence when using the WebViewer library, the browser downloads the index.html file located in the webviewer/lib directory, instead of showing it. This issue can be remidied by using an index.aspx instead of index.html.

However the way the WebViewer function, which creates the instance in the iframe works, there is no way to specify the type of the index file. I can for my test, circumvent the problem by manually replacing the index.html with index.aspx in the webviewer.min.js file. The webviewer can then be used inside an react application hosted on sharepoint.

I suggest you add the following option to the WebViewer instance creator function options object: "indexFileType"

So that you can use the function like this:

WebViewer(
          {
            path: "somepath",
            initialDoc: "somefile",
            indexFileType: "aspx"
          },
)

Depending on this option the iframe "src" attribute is either using "index.html" by default or index.indexType.

FYI: I am not sure, if this is the correct repo for this issue. However, since I am evaluating on using WebViewer inside an React app, I found no better repo. Feel free, to point me in the right direction and I will repost the Feature request there.

Why do we need to explicitly copy the lib files in the public folder?

I was just curious, as long as we install @pdftron/webviewer, couldn't it automatically include the core files in the imports so that we don't need to serve the lib files separately and copy them manually to the public folder?

It feels a bit hacky.

Not able to open large file

I am trying to open large file upto 2 MB but WebViewer is not able to render the file.

File type: PPTX
Size: 1.8 MB

Current Behaviour: Large file not getting opened in rendrer.
Expected Behaviour: Should be able to open large file.

About multiple language support for editing pdf text.

Hello PdfTron!
Is it possible to edit pdf text in some Indian language like Bengali, Hindi or Gujrati from any other language?

TO

Currently it is not showing that new text in Indian language. It is showing blank space.

Webviewer is not loading when distribution X-Frame-Options set to DENY

Hi,

I am using the PDFTron webviewer to show the document as well as the PPTX in my React applications.
Our application is hosted on AWS and delivered through CloudFront.
We have the cloudfront response headers policy enabled for security reasons, and that policy has X-Frame-Options set to DENY, which we cannot set to "SAMEORIGIN". and that X-Frame-Options stopping our webviewer from getting loads.

Could you please suggest some solutions for the above problem?
Thank you in advance.

GitHub Pages

Hi @andreysaf , @mparizeau-pdftron :

How do I get the following project to work on a GitHub Pages?

I tried the following steps:

1. I cloned the webviewer-react-sample project.
2. Added the following information in the package: "homepage"
3. Installed the modules.
4. Done the build.
5. Renamed the build folder to docs.
6. Removed the webviewer folder inside docs.
7. All published.

The page shows, but the webviewer part doesn't, do I have to leave the webviewer folder in docs?

Typo: The initial doc's value is not capitalized to match the actual file name.

The demo does not work as-is on Linux because the file is not found (incorrect lowercase):

webviewer-react-sample/src/App.js

Line 13 in 9eacc71

initialDoc: '/files/pdftron_about.pdf',

https://github.com/PDFTron/webviewer-react-sample/blob/master/public/files/PDFTRON_about.pdf

how do we assign a variable value to initialDoc? WebViwer

how to implement Generate DOCX/Word templates with JSON in React JavaScript without a WebViewer

Running a local file

I am new to react.
I hosted the pdf file using a flask with an external visible sever. Given that URL as input in initialDoc var. Still, it is not able to load the pdf. But if I give the "https://pdftron.s3.amazonaws.com/downloads/pl/webviewer-demo-annotated.pdf" URL it works fine.

Can you help me with this. Where I am doing wrong.

Thanks in advance
regards,
Karthik K

Cannot find how to save cropped area in reactjs PDFTron

I cannot find function in the documentation to save the selected are in PDFTron. I want to get the cropped area and make an API call. Can anyone help me with getting cropped are in the pdf?

Getting window is not defined

GitHub Pages

Hi @andreysaf , @mparizeau-pdftron :

How do I get the following project to work on a GitHub Pages?

I tried the following steps:

1. I cloned the webviewer-react-sample project.
2. Added the following information in the package: "homepage"
3. Installed the modules.
4. Done the build.
5. Renamed the build folder to docs.
6. Removed the webviewer folder inside docs.
7. All published.

The page shows, but the webviewer part doesn't, do I have to leave the webviewer folder in docs?

Component re-renders weird when params are added to url

Really not sure why this is happening when I add a route (with an extra slash) to the URL:

Sample does not work when npm run build && serve -s build

Do I need to change some paths in order to make it work after build ?

Redaction annotations created in PDFTron are black-boxed in other viewers

I'm not sure if it is the right repo to report this issue to, but since it is the one of the most popular here, I hope to get proper attention to it. Feel free to move it to the right repo if needed.

I'm having issues with redaction annotations created in PDFTron. Such file look fine in PDFTRon WebViewer - redactions are marked in purple boxes, I can still read the redacted content, and hovering over the redaction will show me how the final result will look.

But when I open that file in other viewers (Adobe Acrobat, PDFJS), the redaction annotations are marked as already applied. I cannot see the content, the areas are marked in black.

If I make redaction annotations in Adobe Acrobat - they look fine both in PDFTron, and in Adobe Acrobat - purple boxes, visible content, black on hover.

Take a look at the example PDF: Gartner Reprint.pdf

There are three redactions created on the first page. First two redactions created in PDFTron, the last one created in Adobe Acrobat.

All three redactions look fine in PDFTron:

😕

The first two look broken in Adobe Acrobat, and in PDFJS:

😞

Apparently, redactions created in PDFtron do not comply with standards.

Is it possible to disable text selection and text copy from file in WebViewer?

I am working on requirement where I need to disable text selection and text copy from WebViewer.

I tried using isReadOnly: true, flag in WebViewer like below:

WebViewer( { preloadWorker: 'PDF', path: 'lib', licenseKey: license, initialDoc: file, isReadOnly: true, extension: 'pdf', enableOptimizedWorkers: true, disableObjectURLBlobs: true, useDownloader: false, fullAPI: true, disabledElements: [ 'viewControlsButton', 'viewControlsOverlay', 'contextMenuPopup', 'textPopup', ], }, viewer.current as HTMLDivElement, )

Is it possible to disable text selection and text copy from WebViewer?

why do we have two refs to the webviewer ?

Hi, thank you for this react demo.

I don't really understand why we have two refs to the viewer.
One is in the WebViewer.js: <div ... ref={this.viewer} and another one is in App.js: <WebViewer ref={this.webviewer}...>. Shouldn't it be only one ref to the viewer in the "WebViewer.js"?

Cant download the pdf in React app after making freeText Annontation

I am not able to download the pdf using the webviewer React app or even send the blob of the pdf to the server after i make a free-Text annotation programmatically.
adding this code on the app ..after documentLoaded.. prevents the download and gives the following error
---->TypeError: Cannot convert undefined or null to object .......CoreControls.js:938<------

Code for free text annotaion

const freeText = new Annotations.FreeTextAnnotation();
freeText.PageNumber = 1;
freeText.X = 150;
freeText.Y = 200;
freeText.Width = 150;
freeText.Height = 50;
freeText.setPadding(new Annotations.Rect(0, 0, 0, 0));
freeText.setContents('My Text');
freeText.FillColor = new Annotations.Color(0, 255, 255);
freeText.FontSize = '16pt';

    annotManager.addAnnotation(freeText, { autoFocus: false });
    annotManager.redrawAnnotation(freeText);