There is a problem with displaying non-latin characters. Using cmaps in pdfjs will fix this issue. But how should we apply cmaps for worker?

Currently, the defaultScale option is a number, so it's not possible to create a single page viewer.

<Viewer
  defaultScale={SpecialZoomLevel.PageFit}
/>

From @mahaveer0496

Awesome, just 1 more issue, PDFs are blurred, or dont show text at all in Brave browser, Google app mobile.
Here's a sandbox https://codesandbox.io/s/brave-jennings-168x9

Cannot re-export a type when the '--isolatedModules' flag is provided.  TS1205

    30 |     defaultToolbar,
    31 |     Icon,
  > 32 |     LocalizationMap,
       |     ^
    33 |     MenuDivider,
    34 |     MenuItem,
    35 |     Modal,

The problem happens when using the component with create-react-app

Hi , sorry in advance for asking lot of questions , i test to store the number of the currentPage in useState Hooks to keep them for the user

(if user change page (exit to /reader to go /learning (with Router not refresh his page or in new tab) for example) => change the initial page in reader to currentPage viewed by user if return in /reader)

Example

const pdf = () => {

const [currentPageNumber , setCurrentPageNumber] = UseState();

const renderToolbar = (toolbarSlot) => {
          {toolbarSlot.currentPage ? setCurrentPageNumber(toolbarSlot.currentPage) : null}
}

  const layout = (
    isSidebarOpened,
    container,
    main,
    toolbar,
    sidebar,
  ) => {
    return defaultLayout(
      isSidebarOpened,
      container,
      main,
      toolbar(renderToolbar),
      sidebar,
    );
  };

console.log(currentPageNumber + 1)

return (
          <Viewer layout={layout} fileUrl={imageExample}/>
)
}

This works,
I can update the state of currentPageNumber with call the method in renderToolbar , but i have a eslint warning because it's just a bad thing to update component from inside the function body of different component

this error loop every time i change / scroll page (logic , is call the setCurrentPageNumber method)

Maybe i don't understand or need more logic to get around this error to store in state in pdf component

Hi @phuoc-ng , i want to create my own search function and my own search modal or popover

Actually there is a solution already implemented to customize it or is it planned ?

I want to make an other search , responsive and not block the view of user (the popover exceeds from the viewer)

it is not an issue but rather a question

Edit : and whole words search have not the effect exepected , in french we have many accents (é, à ...) i would rather like if we can search with no accents in whole words

Example

République => 1 match case
république => 1 whole words
republique => nothing.

Have a good day :)

Is IE11 fully supported? I found that the viewer doesn't present the scroll properly when it requires to scroll in the page. It works fine in Chrome, Edge, Firebox and Safari.

Won't use the pdf.js annotation layers because it's not easy to customize.
We will build the layer ourselves:

Here is the list of different annotations:

• Link (the most important layer, that can be linked to another page/section)
• Caret
• Circle
• File attachment
• Free text
• Highlight
• Ink
• Line
• Polygon
• Polyline
• Popup
• Square
• Squiggly
• Stamp
• Strike out
• Text
• Underline

It can be text (default) or handTool

Thanks for your work!
I have problems with using library in modal box:

• Search input field is not interactive
  

• Print mode captures unnecessary areas
  

I tested the demo on create-react-app set up but the toolbar is broken like this.

Invoked when zooming in/out the document

Instead of current visible pages, pre-rendering more next few pages can give a better UX.
User scrolls the pages continuously won't often see the loading spinner.

Hi everyone , everything is in title , there is a possibility to use absolute url path in fileUrl props?

Because i read the docs and i don't see mention of this

Thanks for the response

Can we use the actual pdf data blob rather than a URL?

Add new SVG layer which can be used to replace the canvas layer

const renderPage = (props: RenderPageProps) => {
    return (
        <>
            {props.svgLayer.children}
            {props.textLayer.children}
            {props.annotationLayer.children}
        </>
    );
};

<Viewer
    fileUrl='/path/to/document.pdf'
    renderPage={renderPage}
/>

Should be invoked when the document is loaded completely

Thanks Michael Patrushev for reporting the issue.

Hello! I've considered using this project, however, it doesn't ship with a libre license. Would you consider changing the custom license to something more widely-adopted, like BSD for example?

It would be great to be able to pass a custom layout for when a document fails to view.

e.g renderError(error)

The library has onDocumentLoad which lets the client component know when the document loaded, but would be great as well to get notified when the document fails to load with the error and be able to present a custom layout rather than the default plain text layout.

Can't jump between pages from the toolbar if the container's height isn't set.
We can reproduce the issue with a basic next.js setup without using any CSS library.

Hi , my question is simple

Can we force select the SelectionMode.Hand on launch component ?

Actually i create my own render for manipulate RenderViewProps
I use an useEffect in render to accomplish them

Example

const render = (RenderViewerProps) => {

  useEffect(() => {
    RenderViewerProps.changeSelectionMode(SelectionMode.Hand);
  }, [])

}

It works , but i have a eslint warning in my terminal , i can't (he warning this) use useEffect in render function (logic)

my problem is that : how use RenderViewerProps in high order component ? i would use RenderViewProps in my pdf component

Example

const Pdf = (props) => {

useEffect(() =>  {
    RenderViewerProps.changeSelectionMode(SelectionMode.Hand);
})

// don't work => RenderViewerProps is undefined (all the rest off the line same)

const render = (RenderViewerProps) => {
// My render
}

  return (
    <div>
      <Worker workerUrl="https://unpkg.com/[email protected]/build/pdf.worker.min.js">
        <div>
          <Viewer render={render}  fileUrl={exampleImage}/>
        </div>
      </Worker>
    </div>
  );

}

If i had time on this day i create a Codesanbox if needed

Thanks for the time to read this :)

I have a problem with rendering this file https://api.writershield.com/media/aaa.pdf

Pages look render incorrect and rotated at first load

Could you please help me please?

cc @samullman

Hi , i test to create annotation in a simple pdf i have with atril linux (my pdf reader on Ubuntu 18.04)
It works and i have make a test to view if annotation(s) display on reader-pdf

Yes its works , but i have a strange behaviour

I put screen capture

src="annotation-note.svg" not found on project

Thanks for reading :)

• Ctrl + F -> Open the Search popover

• Find next
• Find previous

• Ctrl + O -> Open file
• Ctrl + P -> Print
• Ctrl + + -> Zoom in
• Ctrl + - -> Zoom out
• Enter full screen

My code is below
<Viewer fileUrl="File Path" initialPage={2}/>

When document loaded it start from index but I want to load it from entered page in previous react js component or from 2.
let me know how to fix this
Thanks

I'm checking out the library before buying the license but i cant seem to getting it working in my app.

This is my code, this same code when tested in Codesandbox works fine, but when i add this code to my application, there are no requests made to the fileURL, onDocumentLoad never fires.

There are no CORS error either, i've checked multiple times. In network panel there's just no requests made to specified URL. No errors thrown either.

Is there no onError to check to see what went wrong?

<Worker workerUrl="https://unpkg.com/[email protected]/build/pdf.worker.min.js">
      <div style={{ height: window.innerHeight }}>
        <Viewer
          defaultScale={1}
          onDocumentLoad={console.info}
          fileUrl="https://res.cloudinary.com/dzpcxb0i9/image/upload/v1585215353/20131231103232738561744_mnzsun.pdf"
          initialPage={0}
        />
      </div>
    </Worker>

Thanks in advance!

Some use cases:

• Add a water mask
• Don't display the text layer
• Don't render the content for given page
• Select text and do something
• Drag/drop image/canvas

The first step of supporting theming and dark mode.

Hi @phuoc-ng,
I've been testing with react libraries that show pdf file and I like your library the best.
But I see some fuzziness on the texts when pdf file is rendered through the library.

This is the original pdf file if I download it through your toolbar.

This is the pdf rendered by the library and I see the fuzzy texts here if you take a look at it closely.
What's weird about it is that if you look at the zooming out or zooming in icon on the toolbar, it also seems fuzziness.

When I zoom in using the trackpad on my laptop dragging my fingers away from each other in the browser, zooming icons become sharp and clear. So they may share the same problem I think?

Could you help me out how I can make this fuzziness go away?
Once this is fixed, we would like to use this library in our production.
Thanks :)