Comments (10)
Apologies for the late reply.
Even though I created this repo, I didn't get notifications. I'm now watching it.
You must make sure you supply <DocViewer>
with pluginRenderers.
https://github.com/Alcumus/react-doc-viewer#included-renderers
import DocViewer, { DocViewerRenderers } from "react-doc-viewer";
<DocViewer
pluginRenderers={DocViewerRenderers}
{/* ... */}
/>;
DocViewerRenderers includes the MSDocRenderer.
Or if you don't need the other renderers you can use it like this...
import DocViewer, { MSDocRenderer } from "react-doc-viewer";
<DocViewer
pluginRenderers={[ MSDocRenderer ]}
{/* ... */}
/>;
from react-doc-viewer.
I believe when fetching the file extension aws returns xml instead of the actual filetype extension.
Do you know the fileType extension in advance? If so could you provide it to the docs array object?
const { url, extension } = props
const docs = [{uri: url, fileType: extension}]
from react-doc-viewer.
@Gusyavo I would also recommend hiding the access key etc. in your screenshot just in-case.
from react-doc-viewer.
1. The Header
EDIT
If you update to 0.1.1 - the header will be fixed for you.
Is separate from the custom renderers for file types. You have a few options for the header, I will add more in the future. https://github.com/Alcumus/react-doc-viewer#config a)disableHeader: true
- Then Create your own header/file name display wherever you want. But this will remove file navigation if you plan on using multiple files. b)disableFileName: true
- Will keep the header, and the multi-file navigation, but hide the file name. c) https://github.com/Alcumus/react-doc-viewer#overriding-header-component - You can override the whole header with whatever you want, as long as it is a valid React Component.2. The Height
Without seeing your code exactly I can only guess. But I'm almost certain you just need to add a height to the main component.
So you can try one of the following from https://github.com/Alcumus/react-doc-viewer#styling -
a) Adding a className to the<DocViewer>
component like you would any other React component then having a css class with height as a property in a css file.
b) In a css file override the main component id styles with#react-doc-viewer { height: 900px }
c) Inline style -style={{width: 500, height: 500}}
d) Styled Component
Matt, I can't thank you enough for your help! It was really kind of you telling me what to do. And this library works beautifully!!!
from react-doc-viewer.
@Gusyavo If you are still having issues, respond here and I will gladly help out.
from react-doc-viewer.
@Gusyavo If you are still having issues, respond here and I will gladly help out.
Hey Matt!
Thank you very much for taking the time to answer, I really apreciate it.
I did as you adviced and added the pluginRenderers, this is the code:
the url is a url to an s3 bucket that contains a .docx file. I verified it and it works.
But I get this error:
from react-doc-viewer.
You were right!!! It now looks like this:
It renders the doc, but it shows the urlson top of it too. Am I doing anything wrong?
And, to adjust the height, I guess I have to create a custom renderer and add use css in it, right?
from react-doc-viewer.
1. The Header
EDIT
If you update to 0.1.1 - the header will be fixed for you.
Is separate from the custom renderers for file types.
You have a few options for the header, I will add more in the future.
https://github.com/Alcumus/react-doc-viewer#config
a) disableHeader: true
- Then Create your own header/file name display wherever you want. But this will remove file navigation if you plan on using multiple files.
b) disableFileName: true
- Will keep the header, and the multi-file navigation, but hide the file name.
c) https://github.com/Alcumus/react-doc-viewer#overriding-header-component - You can override the whole header with whatever you want, as long as it is a valid React Component.
2. The Height
Without seeing your code exactly I can only guess. But I'm almost certain you just need to add a height to the main component.
So you can try one of the following from https://github.com/Alcumus/react-doc-viewer#styling -
a) Adding a className to the <DocViewer>
component like you would any other React component then having a css class with height as a property in a css file.
b) In a css file override the main component id styles with #react-doc-viewer { height: 900px }
c) Inline style - style={{width: 500, height: 500}}
d) Styled Component
from react-doc-viewer.
One last thing: everything works perfectly but I am getting these warnings, I do not know if they are normal:
from react-doc-viewer.
One last thing: everything works perfectly but I am getting these warnings, I do not know if they are normal:
This is an old but common issue with JQuery. I guess you are using JQuery? Or a library that is using jquery.
This is outside of the scope of react-doc-viewer, but I have read that this can solve your issue
jQuery.event.special.touchstart = {
setup: function( _, ns, handle ){
if ( ns.includes("noPreventDefault") ) {
this.addEventListener("touchstart", handle, { passive: false });
} else {
this.addEventListener("touchstart", handle, { passive: true });
}
}
};
jQuery.event.special.touchmove = {
setup: function( _, ns, handle ){
if ( ns.includes("noPreventDefault") ) {
this.addEventListener("touchmove", handle, { passive: false });
} else {
this.addEventListener("touchmove", handle, { passive: true });
}
}
};
Although I'm not sure where that code needs to go. Maybe at the end of the jquery file?? I haven't used JQuery for a long time.
You may need to clone more of those blocks of code to get rid of mousewheel
warnings too, and any others that are still happening.
from react-doc-viewer.
Related Issues (20)
- resolve you may need an appropriate loader to handle this file type , currently no loaders are configured to process this file."
- Could not open file using S3 signed URL HOT 6
- window is not defined in SSR HOT 3
- Error: Invalid hook call. Hooks can only be called inside of the body of a function component. HOT 3
- local files not rendering HOT 2
- For PDF Files, set a default Zoom level
- DOMException: The user aborted a request. HOT 1
- how to add custom zoom ?
- Support for AWS.storage.geturl() HOT 1
- XLSX, DOCX, PPTX not working HOT 1
- Docx, Doc file is not working i am passing base64data URI
- Doc viewer buttons submit form
- pdfjs-dist-2.4.456.tgz: 1 vulnerabilities (highest severity is: 8.8) - autoclosed HOT 1
- react-pdf-5.0.0.tgz: 2 vulnerabilities (highest severity is: 8.8) - autoclosed HOT 1
- react-pdf-8.0.2.tgz: 1 vulnerabilities (highest severity is: 8.8) - autoclosed HOT 1
- License Policy Violation detected in picocolors-1.0.1.tgz - autoclosed HOT 1
- Dependency Dashboard
- Conent is repeating without styling
- Not working with Next JS version (0.1.11) HOT 2
- API "3.11.174" and Worker "4.2.67" Version Mismatch HOT 7
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-doc-viewer.