mozilla / pdf.js

PDF Reader in JavaScript
https://mozilla.github.io/pdf.js/
Apache License 2.0
48.25k stars 9.96k forks source link

DOCS nightmare :) - Please add one "hello world" working example (Include the UI widgets) #11705

Closed Ezra-Siton-UIX closed 4 years ago

Ezra-Siton-UIX commented 4 years ago

For now, it's very hard to start with this library (Endless CDN files - I need to guess?).

The examples her not so useful (Where is the zoom in/out + download/print and so on). https://mozilla.github.io/pdf.js/examples/

And the only way to know "what to do" is by view-source of this example - with zero understand whats happening behind the scene (This is not the way docs should be): https://mozilla.github.io/pdf.js/web/viewer.html

I create codepen starter - I need to set all the HTML? (No way to generate the UI widget by code?) https://codepen.io/ezra_siton/pen/bGdMPqe?editors=1111

Snuffleupagus commented 4 years ago

https://mozilla.github.io/pdf.js/web/viewer.html

The default viewer is (more-or-less) purposely not documented in detail, however some smaller tips and tricks can be found at https://github.com/mozilla/pdf.js/wiki/Third-party-viewer-usage; please note http://mozilla.github.io/pdf.js/getting_started/#introduction (emphasis mine):

The viewer is built on the display layer and is the UI for PDF viewer in Firefox and the other browser extensions within the project. It can be a good starting point for building your own viewer. However, we do ask if you plan to embed the viewer in your own site, that it not just be an unmodified version. Please re-skin it or build upon it.

Ezra-Siton-UIX commented 4 years ago

99% of the users need this view (on sites for Clients). Where I put my PDF URL under my codepen? An error occurred while loading the PDF. More Information

-or- maybe I am wrong and this library is not for "regular" sites (plain HTML)?... I want to put this Reader inside webflow (No access to NPM or Server).

reference for great docs

Look at this docs for example - Dev X follow the steps from 1 to X and publish --> DONE: https://github.com/alvarotrigo/fullPage.js/#including-files

copy cdn (CSS/JS)-->add HTML markup-->Initialization` -- done.

timvandermeij commented 4 years ago

There are plenty of examples in https://github.com/mozilla/pdf.js/tree/master/examples in addition to examples page, which is mainly aimed at walking through a hello world example to become familiar with how PDF.js' API works. To provide more assistance, the examples exist which should cover the use cases of most third-party deployments for setting up a simple viewer.

The default viewer is the full viewer that was made specifically for Firefox, so it's not exactly beginner-friendly and it's not meant to be. If you need a simple viewer, use the viewer component to build your own (see https://github.com/mozilla/pdf.js/tree/master/examples/components). If you need all viewer functionality, so can re-skin and adapt the default viewer.

Finally, the examples use the PDF.js API in the most simple way possible. See https://github.com/mozilla/pdf.js/blob/master/examples/components/pageviewer.js and https://github.com/mozilla/pdf.js/blob/master/examples/learning/helloworld.html for example: specify the URL, call the getDocument API and use the API to render the page onto a canvas.

If there are concrete suggestions for improving the documentation, feel free to open a pull request or an issue with actionable improvements.