Toolbar not showing up

Technical Support
1

Which product are you using?
Express plus (free version)
PDF.js Express Version

Detailed description of issue
Tools are not showing up on the pdf, after inspecting the elements it is by default set to “closed”

Screen Shot 2022-05-13 at 4.22.15 PM
Screen Shot 2022-05-13 at 4.22.15 PM1614×410 86 KB

Expected behaviour
PDF tools usable

Does your issue happen with every document, or just one?
every document

Link to document
{Provide a link to the document in question if possible}

Code snippet

import { useRef, useEffect } from "react";
import WebViewer from "@pdftron/pdfjs-express";

const DocumentViewer = () => {
  const viewer = useRef(null);

  useEffect(() => {
    WebViewer(
      {
        path: process.env.PUBLIC_URL + "/pdfjsexpress",
        initialDoc: process.env.PUBLIC_URL + "/pdfjsexpress/demo.pdf"
      },
      viewer.current,
    ).then((instance) => {
    });
  }, []);

  return (
    <div className="">
        <div className="header">React sample</div>
        <div className="webviewer" ref={viewer}></div>
    </div>
  );
};
3

Hello, I’m Ron, an automated tech support bot :robot:

While you wait for one of our customer support representatives to get back to you, please check out some of these documentation pages:

Guides:APIs:Forums:

4

Hi There,

Thanks for your question to enable the tools header you can use the enableElements API (API document). Following is a code snippet for your reference.

import { useRef, useEffect } from "react";
import WebViewer from "@pdftron/pdfjs-express";

const DocumentViewer = () => {
  const viewer = useRef(null);

  useEffect(() => {
    WebViewer(
      {
        path: process.env.PUBLIC_URL + "/pdfjsexpress",
        initialDoc: process.env.PUBLIC_URL + "/pdfjsexpress/demo.pdf"
      },
      viewer.current,
    ).then((instance) => {
        instance.UI.enableElements(['ribbons', 'toolsHeader']);
    });
  }, []);

  return (
    <div className="">
        <div className="header">React sample</div>
        <div className="webviewer" ref={viewer}></div>
    </div>
  );
};

Please let me know if this works for you.

Thanks,

Dandara

5

Hey Dandara,

Thanks so much for the prompt response! I am trying that out now.

I spun up the demo version you guys provide on your wesbite but it didnt utilize that method and the toolbars were able to be used there, could you shed some light on how it was able to work there without the explicit use of enableElements?

Thank you,
Karin

6

Hey there,

I believe you are talking about the secondary annotation toolbar, correct?

By default the viewer is set to View mode which does not have a secondary toolbar. You can programmatically switch it to the Annotate tab by calling

instance.UI.setToolbarGroup('toolbarGroup-Annotate');

This is what we do in the online demo.

Thanks!
Logan

1 Like
7

Hi Logan,

I’m talking about the toolbar that is in the demo with pdfjs express (I’m not sure if you guys refer to that as the secondary annotation toolbar). Also it looked like Dandara’s solution was able to work for me and not the setToolBarGroup method, though i’m unsure why.

1 Like