9 ms·

React PDF Viewer

71 points by rgbrgb 4y ago

mdmglr 4y ago
It uses pdf js under the hood. the ui is very nice and responsive in terms of it loads fast when navigating pages. might use in an upcoming project. https://github.com/react-pdf-viewer/react-pdf-viewer/blob/master/packages/core/src/vendors/PdfJsApi.ts https://github.com/react-pdf-viewer/react-pdf-viewer/blob/ma...
- fgeiger 4y ago
  What is the benefit of importing a dependency only as devDependency and including it like this in the build? Why not just declare a normal dependency?
  - chii 4y ago
    presumably, declaring it this way means you don't ever distribute pdfjs but expect it to be available in the runtime. Not sure if this was the goal.
    - leodriesch 4y ago
      It seems to me that they are using Rollup to bundle the PDF.js source code into their own. I’d guess it makes sense for PDF.js since you likely won’t need it outside of this library in your own project and it comes with multiple builds, of which they might choose one specific. Then install speeds are faster and node_modules are smaller.
      - fgeiger 4y ago
        Thanks for the explanation.
  - jefozabuss 4y ago
    DevDependencies are not installed when you use —production flag at npm install (saving space and time here when you include this package) they are only used for releasing the package versions in this case I assume.
    - fgeiger 4y ago
      Yes, I understand the general use of dev dependencies. However, in this case, 'pdfjs-dist' must be in the build output anyway. So, what is the benefit of including it indirectly?
- evilpie 4y ago
  Seems like they don't mention that fact anywhere in the readme or homepage.
pmontra 4y ago
> You have to purchase a Commercial License at the official website. https://react-pdf-viewer.dev/ https://react-pdf-viewer.dev/
- triyambakam 4y ago
  Yeah that's the most surprising part. And the pricing uses the wrong symbol order for US pricing, not sure about other locations: 49$ instead of $49
  - rob74 4y ago
    Yeah that's the most forgivable part ;). I never understood this particular idiosyncrasy - after all you don't say "it costs dollars three", and you also put other units of measure after the value, e.g. 80 mph, 100 °F, so why on earth does the dollar sign have to go before the amount?
    - davnicwil 4y ago
      Wow, you're right! It's crazy how you can go your whole life never noticing or thinking about something like this that is so clearly irregular, just because it's the way you've always seen it or thought about it. I thought for a few minutes about the reason that units of currency are different and come before the number, determined there must be an obvious logical one. But, if there is, I can't think of it!
      - tbossanova 4y ago
        I think it’s so you can fit the cents symbol at the end e.g. $6.75c - but this isn’t really used anymore so the dollar sign at the front is a bit of a historical anomaly at this point.
        sverhagen 4y ago
        Honest question, was it ever used in that combination? I've seen ¢ used for amounts less than a dollar, e.g.: 75¢. I (still) sometimes use it like that, because, I guess, it makes me feel adjusted to my environment, as an ESL :-) But I've never seen both $ and ¢ in the same amount/expression.
rickette 4y ago
Just a pdf.js wrapper, whats so special about this?
- deleted 4y ago
  [deleted]
- ris58h 4y ago
  It's in the title. React. Everything is better with React.
  - phailhaus 4y ago
    If you're already using React, yes, a thin wrapper around pdf.js is very useful. Probably not useful enough to pay for the commercial license, though.
- cuddlecake 4y ago
  For one, it's a wrapper in React, so no need to implement the glue code yourself if you want to integrate PDFs in your web app. Also, it appears to be feature-rich and yet easy to use for simple use cases.
- jeroenhd 4y ago
  It wraps a normal Javascript library into a React component, which is very useful for many web applications. The license is probably cheaper than having a front end dev invest time into making this embedding work well. Well-built React components can be a great business if you can entice enough people to use them and provide enough support. In most desktop applications, you can probably get away with an iframe to do much of the same thing if you want an alternative. Just put up a static HTML file on your web server that loads pdf.js and takes a path to a PDF file to render and you're pretty much done. If you want to work around the annoyances iframes cause, this library is probably along the lines of what you'd build.
- Tade0 4y ago
  React is basically a "State within a state" of front-end - it's so focused on single-purpose libraries that just about everything has its special, React-only equivalent. So much so, that there are people who just assume that React = front-end, even though that's very much not the case. Draft.js is a popular example of what I'm talking about - other libraries would just wrap around a WYSIWYG solution and call it a day. Also note how this PDF component is not advertised as a wrapper, but is one in reality.
therusskiy 4y ago
Can't believe how spoiled we have become with open source. I see that a license purchase is required here and is immediately taken aback.
- deleted 4y ago
  [deleted]
- adrianthedev 4y ago
  Yeah. I know. I am the author of a similar source available package and selling to developers has been such a painful experience. They (we) have one of the most privileged situations when it comes to finances but they are so reticent in buying software. It's not that the software might not be good, or might not help them, but "it should just be free". That has been my experience. Since my indie developer endeavour, I changed the way I see other solopreneurs and their businesses. Let's support each other through projects like these and these types of licensing and stop taking things for granted.
  - smokel 4y ago
    In my personal experience, it is not so much about the money, but about the work involved to find out the specific conditions for a license. As most open source software uses similar licenses, there are fewer surprises. Quite often, some extra administration is required, just to ensure that a license is used correctly. More recently, with subscription based pricing models, I find it very hard to determine the actual cost upfront. With free software this insecurity is not present. Possibly the most important factor here is trust. With open source communities, I find it fairly easy to determine the quality of a product, and its development team. Commercial companies tend to hide their internal communication, making it harder to assess priorities and how problems are resolved. I wonder if these issues could be solved by intermediaries.
  - commoner 4y ago
    > It's not that the software might not be good, or might not help them, but "it should just be free". The problem is not that the software is unfree (i.e. the software costs money), the problem is that the software is unfree (i.e. the license is proprietary). Source-available software is usually not as flexible as free and open source software, because it has additional restrictions on how the code can be used or redistributed. When there are two software options with equivalent feature sets, and one is source-available while the other is FOSS, it makes sense in many cases to prefer the FOSS one for its more flexible licensing. The main exception is if a developer is selling proprietary software and wants to incorporate copylefted FOSS in a way that would be incompatible with the license, in which case a custom licensing agreement (multi-licensing) could satisfy both parties.
zelphirkalt 4y ago
I am quite happy with the pdf.js default viewer, which does not have react dependencies and does not need to download a meg or two to work. It does not require me to allow all kinds of scripts from the website or even third party scripts from random CDNs. It also does not need a purchase of a license. It has so far always been snappy for me. So unless the feature set of this is so unimaginably great, that it completely revolutionizes PDF viewing, I doubt, that I will ever have a use for it. Maybe a PDF reading focused website could offer it as an alternative viewer, while obviously still preserving the option to view in the standard PDF viewer. Maybe that would make sense then for people, who need it fancier.
- sgt 4y ago
  I would rather render PDF with a native app either as provided by the computer or device or the built in one in Chrome or similar. The reason for that is that we tried pdf.js earlier this year and it is very CPU/mem hungry once you go past simple PDF's it becomes noticable. Also rendering 5-6 single page PDF's in the same web page made Safari bog down.
  - mcny 4y ago
    > I would rather render PDF with a native app either as provided by the computer or device or the built in one in Chrome or similar. This is what PDF.js is... > PDF.js is built into version 19+ of Firefox. https://github.com/mozilla/pdf.js https://github.com/mozilla/pdf.js
    - sgt 4y ago
      Sure, if they optimized it for Firefox and it runs natively there, that's fine and all. But what about all the other browsers? My point still stands.
- scoopertrooper 4y ago
  This is just a bunch of UI bits on top of PDF JS. Pretty rich, considering they're licensing this commercially.
NoCanDo 4y ago
aaaaaaaaaaab 4y ago
*React wrapper for pdf.js
cebert 4y ago
I don’t see why I would want to consider using this library over pdf.js. Can someone explain what the benefits would be?
stoicjumbotron 4y ago
What is the benefit of making it source available? Wouldn't making it completely private make more sense?
silvestrov 4y ago
What is the great selling point compare to use the native PDF view builtin to all modern browsers? I really hate it when websites tries to be smart about PDF viewing. The builtin view is much better and faster. The demo at https://react-pdf-viewer.dev https://react-pdf-viewer.dev is just not as good as opening the PDF directly in the browser.
- Dropper4662 4y ago
  Tracking and locking things within ones own system.
- justsomeuser 4y ago
  I think it enables extending the features using JS/HTML. E.g. A business process involving PDF's could auto annotate some information for a human processor to whizz through.
deleted 4y ago
[deleted]
evolve2k 4y ago
The product mentions it handles PDFs with passwords. Is that possible with just pdf.js I’d like to have PDFs viewable in pdf.js reader that are available to download, but when downloaded, they are protected with a pdf password. Anyone know how this can be done?
- commoner 4y ago
  PDF.js does support decrypting password-protected documents on its own: https://github.com/mozilla/pdf.js/issues/7967 https://github.com/mozilla/pdf.js/issues/7967
- SahAssar 4y ago
  This is just a wrapper around pdf.js, so probably yes. But you should know that if it is viewable by pdf.js in the browser then it will be possible to download it without a password too since you need pdf.js to somehow read the file and pdf.js runs client-side.
deleted 4y ago
[deleted]
pipeline_peak 4y ago
The audacity to call this “React PDF Viewer” then try to sell it
mandeepj 4y ago
Once I was stuck in this Pdf viewer trap. I learned hard way that the browsers default pdf viewer operates in its own sandbox - to which I have no access. My client wanted to edit the data displayed in the pdf viewer and save the latest in a backend storage on Print. I thought I would find the control via document.getElementById (or something similar) grab the latest data, save it, and call it a day; but - nature has some other plans for me. I ended up downloading pdf.js, which has about 30k lines of code. Imagine getting familiar with all of that, making changes, and getting the final output approved by various stakeholders - execs in the loop. Yeah, my reputation was on the line.

71 points by rgbrgb 4y ago

It uses pdf js under the hood. the ui is very nice and responsive in terms of it loads fast when navigating pages. might use in an upcoming project. https://github.com/react-pdf-viewer/react-pdf-viewer/blob/master/packages/core/src/vendors/PdfJsApi.ts https://github.com/react-pdf-viewer/react-pdf-viewer/blob/ma...

fgeiger 4y ago
What is the benefit of importing a dependency only as devDependency and including it like this in the build? Why not just declare a normal dependency?
- chii 4y ago
  presumably, declaring it this way means you don't ever distribute pdfjs but expect it to be available in the runtime. Not sure if this was the goal.
  - leodriesch 4y ago
    It seems to me that they are using Rollup to bundle the PDF.js source code into their own. I’d guess it makes sense for PDF.js since you likely won’t need it outside of this library in your own project and it comes with multiple builds, of which they might choose one specific. Then install speeds are faster and node_modules are smaller.
    - fgeiger 4y ago
      Thanks for the explanation.
- jefozabuss 4y ago
  DevDependencies are not installed when you use —production flag at npm install (saving space and time here when you include this package) they are only used for releasing the package versions in this case I assume.
  - fgeiger 4y ago
    Yes, I understand the general use of dev dependencies. However, in this case, 'pdfjs-dist' must be in the build output anyway. So, what is the benefit of including it indirectly?
evilpie 4y ago
Seems like they don't mention that fact anywhere in the readme or homepage.

pmontra 4y ago

> You have to purchase a Commercial License at the official website. https://react-pdf-viewer.dev/ https://react-pdf-viewer.dev/

triyambakam 4y ago
Yeah that's the most surprising part. And the pricing uses the wrong symbol order for US pricing, not sure about other locations: 49$ instead of $49
- rob74 4y ago
  Yeah that's the most forgivable part ;). I never understood this particular idiosyncrasy - after all you don't say "it costs dollars three", and you also put other units of measure after the value, e.g. 80 mph, 100 °F, so why on earth does the dollar sign have to go before the amount?
  - davnicwil 4y ago
    Wow, you're right! It's crazy how you can go your whole life never noticing or thinking about something like this that is so clearly irregular, just because it's the way you've always seen it or thought about it. I thought for a few minutes about the reason that units of currency are different and come before the number, determined there must be an obvious logical one. But, if there is, I can't think of it!
    - tbossanova 4y ago
      I think it’s so you can fit the cents symbol at the end e.g. $6.75c - but this isn’t really used anymore so the dollar sign at the front is a bit of a historical anomaly at this point.
      - sverhagen 4y ago
        Honest question, was it ever used in that combination? I've seen ¢ used for amounts less than a dollar, e.g.: 75¢. I (still) sometimes use it like that, because, I guess, it makes me feel adjusted to my environment, as an ESL :-) But I've never seen both $ and ¢ in the same amount/expression.

rickette 4y ago

Just a pdf.js wrapper, whats so special about this?

deleted 4y ago
[deleted]
ris58h 4y ago
It's in the title. React. Everything is better with React.
- phailhaus 4y ago
  If you're already using React, yes, a thin wrapper around pdf.js is very useful. Probably not useful enough to pay for the commercial license, though.
cuddlecake 4y ago
For one, it's a wrapper in React, so no need to implement the glue code yourself if you want to integrate PDFs in your web app. Also, it appears to be feature-rich and yet easy to use for simple use cases.
jeroenhd 4y ago
It wraps a normal Javascript library into a React component, which is very useful for many web applications. The license is probably cheaper than having a front end dev invest time into making this embedding work well. Well-built React components can be a great business if you can entice enough people to use them and provide enough support. In most desktop applications, you can probably get away with an iframe to do much of the same thing if you want an alternative. Just put up a static HTML file on your web server that loads pdf.js and takes a path to a PDF file to render and you're pretty much done. If you want to work around the annoyances iframes cause, this library is probably along the lines of what you'd build.
Tade0 4y ago
React is basically a "State within a state" of front-end - it's so focused on single-purpose libraries that just about everything has its special, React-only equivalent. So much so, that there are people who just assume that React = front-end, even though that's very much not the case. Draft.js is a popular example of what I'm talking about - other libraries would just wrap around a WYSIWYG solution and call it a day. Also note how this PDF component is not advertised as a wrapper, but is one in reality.

therusskiy 4y ago

Can't believe how spoiled we have become with open source. I see that a license purchase is required here and is immediately taken aback.

deleted 4y ago
[deleted]
adrianthedev 4y ago
Yeah. I know. I am the author of a similar source available package and selling to developers has been such a painful experience. They (we) have one of the most privileged situations when it comes to finances but they are so reticent in buying software. It's not that the software might not be good, or might not help them, but "it should just be free". That has been my experience. Since my indie developer endeavour, I changed the way I see other solopreneurs and their businesses. Let's support each other through projects like these and these types of licensing and stop taking things for granted.
- smokel 4y ago
  In my personal experience, it is not so much about the money, but about the work involved to find out the specific conditions for a license. As most open source software uses similar licenses, there are fewer surprises. Quite often, some extra administration is required, just to ensure that a license is used correctly. More recently, with subscription based pricing models, I find it very hard to determine the actual cost upfront. With free software this insecurity is not present. Possibly the most important factor here is trust. With open source communities, I find it fairly easy to determine the quality of a product, and its development team. Commercial companies tend to hide their internal communication, making it harder to assess priorities and how problems are resolved. I wonder if these issues could be solved by intermediaries.
- commoner 4y ago
  > It's not that the software might not be good, or might not help them, but "it should just be free". The problem is not that the software is unfree (i.e. the software costs money), the problem is that the software is unfree (i.e. the license is proprietary). Source-available software is usually not as flexible as free and open source software, because it has additional restrictions on how the code can be used or redistributed. When there are two software options with equivalent feature sets, and one is source-available while the other is FOSS, it makes sense in many cases to prefer the FOSS one for its more flexible licensing. The main exception is if a developer is selling proprietary software and wants to incorporate copylefted FOSS in a way that would be incompatible with the license, in which case a custom licensing agreement (multi-licensing) could satisfy both parties.

zelphirkalt 4y ago

I am quite happy with the pdf.js default viewer, which does not have react dependencies and does not need to download a meg or two to work. It does not require me to allow all kinds of scripts from the website or even third party scripts from random CDNs. It also does not need a purchase of a license. It has so far always been snappy for me. So unless the feature set of this is so unimaginably great, that it completely revolutionizes PDF viewing, I doubt, that I will ever have a use for it. Maybe a PDF reading focused website could offer it as an alternative viewer, while obviously still preserving the option to view in the standard PDF viewer. Maybe that would make sense then for people, who need it fancier.

sgt 4y ago
I would rather render PDF with a native app either as provided by the computer or device or the built in one in Chrome or similar. The reason for that is that we tried pdf.js earlier this year and it is very CPU/mem hungry once you go past simple PDF's it becomes noticable. Also rendering 5-6 single page PDF's in the same web page made Safari bog down.
- mcny 4y ago
  > I would rather render PDF with a native app either as provided by the computer or device or the built in one in Chrome or similar. This is what PDF.js is... > PDF.js is built into version 19+ of Firefox. https://github.com/mozilla/pdf.js https://github.com/mozilla/pdf.js
  - sgt 4y ago
    Sure, if they optimized it for Firefox and it runs natively there, that's fine and all. But what about all the other browsers? My point still stands.
scoopertrooper 4y ago
This is just a bunch of UI bits on top of PDF JS. Pretty rich, considering they're licensing this commercially.

NoCanDo 4y ago

aaaaaaaaaaab 4y ago

*React wrapper for pdf.js

cebert 4y ago

I don’t see why I would want to consider using this library over pdf.js. Can someone explain what the benefits would be?

stoicjumbotron 4y ago

What is the benefit of making it source available? Wouldn't making it completely private make more sense?

silvestrov 4y ago

What is the great selling point compare to use the native PDF view builtin to all modern browsers? I really hate it when websites tries to be smart about PDF viewing. The builtin view is much better and faster. The demo at https://react-pdf-viewer.dev https://react-pdf-viewer.dev is just not as good as opening the PDF directly in the browser.

Dropper4662 4y ago
Tracking and locking things within ones own system.
justsomeuser 4y ago
I think it enables extending the features using JS/HTML. E.g. A business process involving PDF's could auto annotate some information for a human processor to whizz through.

deleted 4y ago

[deleted]

evolve2k 4y ago

The product mentions it handles PDFs with passwords. Is that possible with just pdf.js I’d like to have PDFs viewable in pdf.js reader that are available to download, but when downloaded, they are protected with a pdf password. Anyone know how this can be done?

commoner 4y ago
PDF.js does support decrypting password-protected documents on its own: https://github.com/mozilla/pdf.js/issues/7967 https://github.com/mozilla/pdf.js/issues/7967
SahAssar 4y ago
This is just a wrapper around pdf.js, so probably yes. But you should know that if it is viewable by pdf.js in the browser then it will be possible to download it without a password too since you need pdf.js to somehow read the file and pdf.js runs client-side.

deleted 4y ago

[deleted]

pipeline_peak 4y ago

The audacity to call this “React PDF Viewer” then try to sell it

mandeepj 4y ago

Once I was stuck in this Pdf viewer trap. I learned hard way that the browsers default pdf viewer operates in its own sandbox - to which I have no access. My client wanted to edit the data displayed in the pdf viewer and save the latest in a backend storage on Print. I thought I would find the control via document.getElementById (or something similar) grab the latest data, save it, and call it a day; but - nature has some other plans for me. I ended up downloading pdf.js, which has about 30k lines of code. Imagine getting familiar with all of that, making changes, and getting the final output approved by various stakeholders - execs in the loop. Yeah, my reputation was on the line.