Question 252096 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – How to render password protected pdf file in react-pdf

I’m facing an issue with the react-pdf password protected file, Prompt for password for password protected PDF keeps popping up. How to handle this scenario?

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    The deafult onPassword method is very limited, To handle this scenario we have to write our custom onPassword functionality.

    const [numPages, setNumPages] = useState(null);
const [showDocument, setShowDocument] = useState(true);


const onDocumentLoadSuccess = pages => {
  setNumPages(pages._pdfInfo.numPages);
};


function onPassword(callback, reason) {
  function callbackProxy(password) {
   // Cancel button handler
  if (password === null) {
  // password will be null if user clicks on cancel, you should unmount the Document and show custom message, eg:  failed to load  PDF and button with try again
     setShowDocument(false);
  }

  callback(password);
}
switch (reason) {
 case 1: {
  const password = prompt("Enter the password to open this PDF file.");
  callbackProxy(password);
  break;
}
case 2: {
  const password = prompt("Invalid password. Please try again.");
  callbackProxy(password);
  break;
}
default:
 }
}

{
 !showDocument ? (
   <button
    onClick={() => {
    setShowDocument(true);
     }}
    >
     Reload PDF with password
   </button>
 ) : (
   <Document
    file={'./sampleProtectedFile.pdf'}
    onLoadSuccess={onDocumentLoadSuccess}
    onPassword={onPassword}
   >
    {Array.from(new Array(numPages), (el, index) => (
      <Page
        key={`page_${index + 1}`}
        pageNumber={index + 1}
      />
   ))}
  </Document>
 );
}

  2. 0 
    Install the react-pdf package:
npm install @react-pdf/renderer
Create a Document component and pass in the path to the password-protected PDF file as the source prop:
JavaScript
import { Document } from '@react-pdf/renderer';

const PasswordProtectedDocument = () => {
  return (
    <Document source="/path/to/password-protected.pdf">
      {/* Your PDF content */}
    </Document>
  );
};
If you know the password to the PDF file, you can pass it in as the password prop to the Document component:
JavaScript
import { Document } from '@react-pdf/renderer';

const PasswordProtectedDocument = () => {
  return (
    <Document source="/path/to/password-protected.pdf" password="mypassword">
      {/* Your PDF content */}
    </Document>
  );
};
If you do not know the password to the PDF file, you can use the onDocumentAskPassword prop to handle the event when the PDF viewer asks for the password:
JavaScript
import { Document, Viewer } from '@react-pdf/renderer';

const PasswordProtectedDocument = () => {
  const [password, setPassword] = React.useState('');

  const handleAskPassword = (e) => {
    setPassword(e.target.value);
    e.verifyPassword(password);
  };

  return (
    <Viewer onDocumentAskPassword={handleAskPassword}>
      <Document source="/path/to/password-protected.pdf">
        {/* Your PDF content */}
      </Document>
    </Viewer>
  );
};

    enter code here

Render the PasswordProtectedDocument component in your React application.
you will be able to render the password-protected PDF file in your React application.
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search