Not able load the document with URL

Feature Requests
1

Image
image

Tried, your every possible solution that you have already mentioned while discussing the same issue with others but then also not able to load the document with URL.

Not throwing CORS error also.

Please guide me on the same.

2

Hi there,

Thank you for contacting pdf.js express forums,

Could you please share your pdf.js express version as well as the code you are using to load the document? Could you also please share the console error messages if any?

Best regards,
Kevin Kim

3

1.pdf.js express version
8.7.2

  1. Code Snippet
    import React from ‘react’;
    import WebViewer from ‘@pdftron/pdfjs-express’
    import “./styles.css”;

export default function App() {
const viewer = React.useRef(null);

// if using a class, equivalent of componentDidMount
const funView = () =>{
WebViewer(

  {
      path: 'WebViewer/lib',
   //   initialDoc: "https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf",
      extension:'pdf'
  },

  viewer.current,

    ).then((instance) => {
      
      // change to dark mode
      instance.UI.setTheme('dark');
    instance.UI.loadDocument("https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf");
      instance.Core.documentViewer.addEventListener('documentLoaded', () => {
    
        // add a custom annotation
        const rectangleAnnot = new instance.Core.Annotations.RectangleAnnotation();
        rectangleAnnot.PageNumber = 1;
        rectangleAnnot.X = 100;
        rectangleAnnot.Y = 150;
        rectangleAnnot.Width = 200;
        rectangleAnnot.Height = 50;
    
        instance.Core.annotationManager.addAnnotation(rectangleAnnot);
      })
    });

}
return (


<button onClick={() => {funView()}}>View
<div style={{height:‘auto’,overflowY:‘auto’}}>
{/*
React sample.
*/}
<div className=“webviewer” style={{ height: “51em” }} ref={viewer}>



);
}

Here, in this code I have commented out initialDoc but have already tried keeping pdf URL there but didn’t get the solution.

There is no error in the console.

4

Hi there,

Thank you for your response,

I tried the code
instance.UI.loadDocument("https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf");

on our demo site PDF.js Viewer Demo | PDF.js Express and see the following CORS error:

image
image1920×981 153 KB

Could you try the following CORS guide and see if that resolves your issue?
Loading PDF.js Express from a CDN or another origin | Documentation)-copy-assets-to-cdn
OR Apryse Documentation | Documentation

Best regards,
Kevin Kim

5

Still not able to solve the error.
Now, I am trying with anther URL and it is showing the error of invalid pdf structure. CORS error isn’t there now.

I am trying with the URL
blob:http://localhost:3000/2004668f-dffb-4a12-8be0-72e1c76b4c59

Attaching the screenshot of the error message

image
image829×348 3.15 KB

Also, please explain why this error of invalid pdf structure is occurring and what can be done to resolve it. What kind and structure of URL I need to pass to get rid of the error. I am trying to reload the pdf with URL since long and got stuck here, please resolve the same.

6

Hi there,

I downloaded the PDF from https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf then load the PDF directly on the demo and was able to view the PDF as expected without any notable console messages:

image
image1515×718 106 KB

Regards to another URL : blob:http://localhost:3000/2004668f-dffb-4a12-8be0-72e1c76b4c59
Could you please share the actual PDF file or a publicly accessible link to the PDF?

Best regards,
Kevin Kim

7

Regarding the second URL of blob, its a URL generated by me so I cant help you out with its
public access.
But I guess, I got the answer, if I need help further I will let you know.