How do I render a PDF on the viewer page?

Support
1

Good day everyone!

I want to render PDF over the viewport using the HTML element.

  • On previewing the PDF, I get a blank grey page with the page’s dimensions(A4). There are no errors on the console or the terminal.
  • I am using OHIF version 3.6.
...
<Embed src={pdf + '#toolbar=0'} type="application/pdf" />
...

The value of pdf is of type data:application/octet-stream;base64, which is being fetched from an API call.

The same setup works if I run a react application with the same react version as OHIF, elsewhere.

Any help on this bug is super appreciated!

Regards,
Yash

2

Just for clarification, are you simply trying to overlay an embed/pdf element over a viewport? If so, would it be possible for you to provide the code you added to OHIF to accomplish this?

Thanks.

3

Hi Jbocce,
Yes we are trying to overlay an embedded pdf over a viewport in our OHIF project .
This is relevant code

const [pdf, setPdf] = useState<string>('');
const generatePDFFromHTML = async (htmlData, fileName) => {
    try {
      const payload = {
        html: htmlData,
        fileName: fileName,
      };

      const response = await axios.post(
        'http://localhost...',
        payload,
        {
          headers: {
            'Content-Type': 'application/json',
          },
        }
      );

      const dataURLPromise = new Promise(resolve => {
        const reader = new FileReader();
        reader.onloadend = () => {
          resolve(reader.result);
        };
        reader.readAsDataURL(new Blob([response.data]));
      });

      const objectURL = await dataURLPromise;
      setPdf(objectURL as string);
    } catch (error) {
      console.error('Error generating or processing PDF:', error);
    }
  };

 useEffect(() => {
    if (props.html === null) return;
    if (props.visibility === false) return;

    generatePDFFromHTML(props.html, props.singleStudyData.studyOrthancID);
  }, [props.html, props.visibility]);
4

Thanks for the code snippet, but I think we need a little more information. Where in the OHIF code is the snippet you sent being applied? If you could provide more code for context then that would be great.

Also, what errors (if any) are you seeing? Do you see the the <embed> tag in the DOM?