alcumus / react-doc-viewer Goto Github PK

View Code? Open in Web Editor NEW

189.0 189.0 94.0 515 KB

License: Apache License 2.0

TypeScript 75.58% JavaScript 24.42%

react-doc-viewer's People

Contributors

Stargazers

Watchers

Forkers

hawekotte auronsan1st mr-good aaquibnaved nexolink anasyo10 nazarky tullyapp ericmcwinner jojonarte thanveerahamed aubreyzulu ccrichards96 ronaldofj hawkzey miketalbot tawhidabdullah dregorox thetechcompany tomy-uppermedic fredc97 beehivr bandaot z3plus2 abstractops adrael brian320 itsmitchyyyy cubiceyes thapelo505 mouhsinelonly ayush1096 reaphq ibrahimelaradi undermountain96 wachidmudi wasikjaroslawnet theultdev arpitprod react-coder r-uis buyerassist-io josef94 hongchanfeng guptagaurav89 invicara learngram-ai beesbusy jorgeflores arjuntudotechnologies zahintudo loconav-tech diegoperalta1987 nghiant96 darkoatanasovski people-club lihong88 sarfraz-droid lzinik erkib umarbinayazfalcon setioko27 anhngml custiv agronom81 emadjumaah feiyedev jamsassist bkakadiya42 aleksandrilinykh aleksandrilinykhisax 3mpe lazydev-ak jaykhatri2910 xuxinli qfni123 padalavenkataramesh ashutoshdkedar santhoshparthiban2002 batman110391 liolle qubernetinc goresawata27 ack-solutions 46gom laelmartinez sobhaditya-idexcel vg-yuvaraj-bathrabagu pavan-goli

react-doc-viewer's Issues

MSGRenderer - Use safe iframe for msg content display

Duplicate File loading

Don't initially download the whole file, just fetch the headers and determine the mime-type
If a custom renderer needs to load the file itself, add a callback function to run after the mime-type is detected

Add AUTH headers to Doc Uri?

I am wanting to use the document URI to display a file, but I cant seem to figure out how to add custom headers to the Head and Get http calls that happen.

These headers are things so that the requests can be authenticated.

I tried converting the file into a blob Uri, but I get method not accepted.

Download PDF Button not working

Need to make a LinkButton that is created from tag

Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons

Hi! I tried to use react-doc-viwer in my react project, but I come across on this issue:

I tried to change versions of react, adding separate react in peerDependencies.
react-doc-viwer use [email protected] and [email protected] so in theory it support hooks. If it's not problem with : Mismatching Versions of React and React DOM , I don't know what is going on...

paskage.json

 {
  "name": "trainings",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@ckeditor/ckeditor5-build-classic": "^26.0.0",
    "@ckeditor/ckeditor5-build-decoupled-document": "^26.0.0",
    "@ckeditor/ckeditor5-react": "^3.0.1",
    "@testing-library/jest-dom": "^5.11.9",
    "@testing-library/react": "^11.2.5",
    "@testing-library/user-event": "^12.8.1",
    "jquery": "^3.6.0",
    "react-doc-viewer": "^0.1.5",
    "react-movable": "^2.5.3",
    "react-redux": "^7.2.2",
    "react-scripts": "4.0.3",
    "redux": "^4.0.5",
    "semantic-ui-css": "^2.4.1",
    "semantic-ui-react": "^2.0.3",
    "web-vitals": "^1.1.0"
  },
  "peerDependencies": {
    "react": "^17.0.1",
    "react-dom": "^17.0.1"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

My function to render was just simply copied from the example.

import DocViewer from "react-doc-viewer";

function App() {
  const docs = [
    { uri: "https://url-to-my-pdf.pdf" },
    { uri: require("./example-files/pdf.pdf") }, // Local File
  ];

  return <DocViewer documents={docs} />;
}

Hide controls

Is it possible to hide the header controls( Zoom, Pagination, download, etc), or can I move it to the bottom?

Make no-renderer contents replaceable

HTML Renderer not working

I'm getting below error.

scheduler.development.js:171 Uncaught DOMException: Failed to execute 'atob' on 'Window': The string to be decoded is not correctly encoded.
    at http://localhost:8888/static/js/6.chunk.js:197230:23

For htm file below:

<!DOCTYPE html>
<html>
	<body>
		<div style="width: 500px; margin: auto">
			<h2>Some Display for Lennox</h2>
			<div>Rating: <span id="rb-rating">0</span></div>
			<div>Total Reviews: <span id="rb-reviews-total">0</span></div>
		</div>

		<div style="margin-top: 100px">
			<script
				type="text/javascript"
				src="https://public.staging.rbfeedback.com/widget/expanded/5c627211ad3270412a47f5a3?testimonials=1"
				async
			></script>
		</div>
	</body>
</html>

CORS Issues

Hi,
Thanks for this usefull package.

I'm wondering about how I can add the credentials to the fetch request.
This crendentials are needed as we must be logged to have the rights access.

For the time being, I updated directly the code of fileLoader.js :
from
return fetch(documentURI, { signal: signal })
to
return fetch(documentURI, { signal: signal, credentials: 'include' })

Is there another solution to solve this issue ?

Thanks in advance

Allow the user to specify file type per document to prevent need for HEAD fetch

Recoil as an experiment went very well, but should be retired until it has RC

Recoil is a Facebook experiment to overcome issues with redux, react contexts and states.
Although, looks like it won't have a Release Candidate very soon.
But definitely will be something to look at in the future.

Revert to style of React Context and useReducer from just before features/recoil was merged in.
The data structures etc. will most likely need altering at this point so it won't just be a simple rollback.

Add PDF rotation

Would it be possible to enable / expose PDF rotation functionality?

I see that pdf.js appears support PDF rotation.

add option for view files tif

Add option for view files tif, this library or extesion is the most complete that I found, and I do testing to integrate this with my web app, the option for view docs, no works

doc-nav previous n next not working

at initial 1st file of documents[] loads but after using doc-nav previous or next button. loader keeps on loading bcoz fetch request is not made to 2nd file

预览10M左右的word文档，预览不了

最大支持的文件体积是多大呀？怎么去配置呀？

Docx is not working

Hello,
i am trying to show docx type document but it showing error.

for this is used code
const docs = [
{ uri: "http://localhost:8080/UploadDocs/sampleDoc.docx" },
{ uri: "http://localhost:8080/UploadDocs/sampleformat1032.rtf" },
{ uri: "http://localhost:8080/UploadDocs/sapmle123.txt" },
{ uri: "http://localhost:8080/UploadDocs/143.pdf" }
// { uri: require("D:/Apache Software Foundation/Tomcat 8.5/webapps/UploadDocs/143.pdf") }, // Local File
];
return (

);

please correct me if wrong or please give solution on it

Add 'download file' button on - no-renderer found screen

Demo

Is there an online demo somewhere? Thanks!

Create TIFF renderer

No Renderer for file type application/vnd.openxmlformats-officedocument.wordprocessingml.document

Hello!

I am getting this message when I try to use this library:

This is my code:

Am I doing anything wrong? Thanks in advance for your answer!

import React from 'react'
import DocViewer from 'react-doc-viewer'

function Viewer() {

// const path = './Sample1.docx'

const docs = [
// { uri: path }, // Local File
{ uri: require('./Interview.docx') }, // Local File
]

return (

)
}

export default Viewer

Page Navigation

Hi, thanks for your work.

Could you add parameters for page number/navigation, so the user can pass a page number to open the specified page.

Create HTMLRenderer

How do i hide the download button?

Is there a way to hide the download button on the viewer?

Is possible to view a file from memory?

Hello, first of all thank-you for this awesome package!)

Do i have possibility to view a file which I have loaded in memory?

File Not Found for .docx file types

All other file types can be viewed and working fine except docx

<DocViewer documents={initVal} pluginRenderers={DocViewerRenderers} style={{width:"100%", minHeight:"600px", marginBottom:"30px"}} />

All files are from firebase storage which is already enabled CORS

CORS Policy Issue

Hi,

I'm getting Access to fetch at 'https://remote_server/sample.pdf' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled. while loading a remote file.

How do I resolve this on react-doc-viewer?

Thanks

Add a Renderer for common Microsoft File Extensions

doc
docx
ppt
pptx
xls
xlsx

No Renderer for file type application/octet-stream

Getting this error when i try to view pptx or docx files.

import React from 'react'
import { useRouteMatch } from "react-router-dom";
import DocViewer, { MSDocRenderer } from "react-doc-viewer";

const Document = (props) => {
  const match = useRouteMatch();

  const docs = [
    { uri: "https://queue.nyc3.cdn.digitaloceanspaces.com/lkfjslkdfj.pptx" }
  ];

  return(
    <React.Fragment>
      Document.js
      <DocViewer documents={docs} pluginRenderers={[MSDocRenderer]} />
    </React.Fragment>
  )
}

export default Document; 
// https://queue.nyc3.cdn.digitaloceanspaces.com/agency%20reachout%20.docx
// https://queue.nyc3.cdn.digitaloceanspaces.com/lkfjslkdfj.pptx

.jg files stuck in loading

Hi,

Firstly, thanks for taking the time to create such a great package.

Images loading from the filesystem work great. But I'm having some issues loading .jpg files from the host URL. Something like: api.localhost.com/img.jpg . React-doc-viewer just sits there spinning. I can, however, view the image fine if I encapsulate it in a html tag <img src="api.localhost.com/img.jpg"/> so I know the link is good.

I was wondering if perhaps my webpack settings might be affecting the behaviour of react-file-viewer? I've atttached a snippet below. Do you see any possible issues?

{
       test: /\.(jpg|png|mp4|mp3)$/, 
          use: {
            loader: "url-loader",
            options: {
              name: "[path][name].[ext]",
              publicPath: "/",
            },
          },
}

I'm using "react-doc-viewer": "^0.1.5" with Typescript (es5) and "react": "^16.13.1".
Any tips to debug would be much appreciated!

Cheers

Merge default plugins back into this project

Pull the plugins from Alcumus/react-doc-viewer-plugins back into this repository.
There is no advantage to them being in an external repository, as once in this project they can be optionally imported in the same way, and also overridden by custom renderers from the user.

Reduce dependencies by removing fontawesome and it's companion packages

Can we add a button to print the document similar to the download button

Can we have a an option to have a print button..just like the download button..we can place the print button next to the download button.

We can pass it as props whether we want to see a print button or not.

@mattmogford-alcumus @mattmogford @alcumus-itinfrastructure

Returns 403 Forbidden error for AWS pre-signed PDF files

Make LoadingContainer contents replaceable

Could you support content-type to determine URL validity?

I'm storing images in firebase. These end up with a format like this:

https://firebasestorage.googleapis.com/v0/b/graceblocks-4efeb.appspot.com/o/customers%2Fschema_1%2Fattachments%2F67282db5-5a8c-4d66-9862-968ce6fcecf3.jpg?alt=media&token=35f685d8-c449-42cc-bafe-cc70e44370e5

The DocViewer doesn't recognize this URL as a .JPG even though it is. Is there anyway to add support where we specify the content-type of the URL instead of relying on the extension itself?

Fix: Document fetches header even if file type is supplied

ERROR in ./node_modules/react-pdf/dist/esm/eventBus.js

Hi, I am getting this error when I am using the package on my rails react app,

"export 'EventBus' was not found in 'pdfjs-dist/lib/web/ui_utils'

It's a simple import not anything fancy

import DocViewer from "react-doc-viewer";

const docs = [
    { uri: "http://www.orimi.com/pdf-test.pdf" },
  ];
  
  <DocViewer documents={docs} />

Would appreciate any help on this.

My rails version is 5.2.3
My react version is 16.3.0
My node version is 13.7.0

I am using yarn instead of npm as it goes with my project. Using webpack to compile the JS.

Thanks

README - styled component example is missing a closing bracket after DocViewer

https://www.npmjs.com/package/react-doc-viewer#--styledcomponent

Excel,Docs Files Not supported in Base64 Input method

Hi Team,

I try to load the files using the Base64 method. such as below

Its working fine for PDF and Images but not working for Docx,doc,xlsx files.

please help me to fix this issue

Make all ui replaceable through component props

Make individual UI elements replaceable.
E.g. fileName, document controls and the whole header.
Document controls override prop should return a function that provides callbacks to prev and next document navigation.

Create RTF Renderer

Create BMP renderer

PDFRenderer error: Can't perform a React state update on an unmounted component

Hi, I get the following error message which causes the PDF page viewer UI to collapse. It happens when the component is re-rendered which is triggered via a React state update. It seems that the error originates from PDFRenderer plugin component.

Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in the componentWillUnmount method.
    in Document (created by Styled(Document))
    in Styled(Document) (created by PDFPages)
    in PDFPages (created by PDFRenderer)
    in div (created by styled.div)
    in styled.div (created by PDFRenderer)
    in PDFProvider (created by PDFRenderer)
    in PDFRenderer (created by Contents)
    in Contents

I'm able to reproduce this issue in my code sandbox - (https://codesandbox.io/s/affectionate-feistel-zpfhn). Ignore Failed to load PDF file error. Codesandbox doesn't support loading a PDF file from an external source.

Create TXT Renderer

Add ability for user to have a custom decorator to replace 'weight'

Or a whole new decorator and way of selecting a preferred renderer.
e.g. Where SelectedRenderer is chosen insideuseRendererSelector.ts, the user could pass in their own sorting function.

Is there support for Base 64 files?

Individual included renderer usage missing from the README

Same file type toggle

I found an issue by using previous et and next function.

If 2 files have the same file type, the next file is not uploading and it's loading infinity.

I would like to help you on this package, don't hesitate if you need another hand.

Thank you again for developing this package !

Can is use Office Embed in a comercial project?

Hi,

I've been looking for information on the https://view.officeapps.live.com/op/embed.aspx endpoint but I've not been able to come up with a clear answer. Do you know if you are allowed to use that endpoint in a comercial website (not based on office 365)?

Btw, loved how easy to use and the ability to import just the needed renderers!