Error: Missing iframe's allow-scripts permission

[frodo-cs]

When trying to load a PDF file I get the following error:

Here is the code:

import { Card } from "react-bootstrap";
import "./styles.scss";
import DocViewer, { DocViewerRenderers } from "@cyntler/react-doc-viewer";

const DocumentsContainer = () => {
  return (
    <Card className="shadow">
      <DocViewer
        documents={[
          {
            uri: "./pdf-test.pdf",
          },
        ]}
        pluginRenderers={DocViewerRenderers}
      />
    </Card>
  );
};

export default DocumentsContainer;

[devAbreu]

Hello @frodo-cs

Ensure that ./pdf-test.pdf is being correctly served by your server. Sometimes relative paths can cause issues if the file is not in the correct location or is not being served.

If the PDF file is in the public directory of your project, you can directly reference it using a relative URL:

const docs = [
   { uri: "/pdf-test.pdf" }
 ];

The public directory is directly served at the root of your app, so referencing /pdf-test.pdf should work without additional configuration.

If the file is in the src directory, you can import it using require or import:

const docs = [
  { uri: require("./folder-files/pdf-test.pdf") }
];

This will ensure that the file is bundled when your app is compiled. However, this approach may not work well for large files, so serving from the public folder is often a better approach.

Basic