Error with onDocumentAskPassword

[MomThu]

I have an encrypted pdf file and need to open it with a password. I follow the example at https://react-pdf-viewer.dev/examples/submit-the-password-programmatically/ but pdf only shows up a few times when I visit the page. For example, if I visit the website 10 times, about 1-2 times the pdf page will appear, the other times it will be in an infinite loading state.
Can anyone help me? Thank you!

Here is my code

Infinity loading state

[JanVilimek]

Are you using range requests?

If so, there is known bug about this, just disable the range requests, by adding this to the viewer element.

transformGetDocumentParams={(options: PdfJs.GetDocumentParams) => {
   return (
      Object.assign({}, options, {
         disableRange: true,
      })
    );
}}

I hope it helps somehow

[MomThu]

Are you using range requests?

If so, there is known bug about this, just disable the range requests, by adding this to the viewer element.

transformGetDocumentParams={(options: PdfJs.GetDocumentParams) => {
   return (
      Object.assign({}, options, {
         disableRange: true,
      })
    );
}}

I hope it helps somehow

Can you explain more clearly? I don't know how to add it.
And if my code processes a pdf file without a password, there is no problem at all, the pdf file will always be displayed every time it is accessed.

[MomThu]

Are you using range requests?

If so, there is known bug about this, just disable the range requests, by adding this to the viewer element.

transformGetDocumentParams={(options: PdfJs.GetDocumentParams) => {
   return (
      Object.assign({}, options, {
         disableRange: true,
      })
    );
}}

I hope it helps somehow

After a while, I tried to add something like this, It works well, but I don't know why.
Thanks so much for your reply!

transformGetDocumentParams={(options: PdfJs.GetDocumentParams) =>
        Object.assign({}, options, {
            disableRange: false,
            disableStream: true,
        })
    }

[JanVilimek]

The bug is in the component showing protectedview (view with input and unlock button)
If there is range requests or streams in use, it gives different http statuses (304 etc.) with which the protected view does not know how to handle. (thats the bug)

Disabling the ranges or streams, leave the secure screen to use basic fetch (2xx http success responses)

I am glad it helped you!