pdftron / webviewer-react-sample Goto Github PK
View Code? Open in Web Editor NEWSample to demonstrate integrating WebViewer into React
License: Other
Sample to demonstrate integrating WebViewer into React
License: Other
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"?
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?
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.
Do I need to change some paths in order to make it work after build ?
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.
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.
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?
Hi @andreysaf , @mparizeau-pdftron :
How do I get the following project to work on a GitHub Pages?
I tried the following steps:
webviewer-react-sample
project.The page shows, but the webviewer part doesn't, do I have to leave the webviewer folder in docs?
Hi @andreysaf , @mparizeau-pdftron :
How do I get the following project to work on a GitHub Pages?
I tried the following steps:
webviewer-react-sample
project.The page shows, but the webviewer part doesn't, do I have to leave the webviewer folder in docs?
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
https://github.com/PDFTron/webviewer-react-sample/blob/master/public/files/PDFTRON_about.pdf
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
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.
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);
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.
๐
Apparently, redactions created in PDFtron do not comply with standards.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.