Toolbar not showing up

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”

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>
  );
};

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:

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

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

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