Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://github.com/run-llama/pdf-viewer below:

run-llama/pdf-viewer: Display PDFs in your RAG app

PDF viewer component as used by secinsights. Using react-pdf.

npm install @llamaindex/pdf-viewer

import React from 'react';

import '@llamaindex/pdf-viewer/index.css';
import { PDFViewer, PdfFocusProvider } from '@llamaindex/pdf-viewer';

const file = {
  id: 'sample-document',
  url: 'https://d687lz8k56fia.cloudfront.net/sec-edgar-filings/0001045810/10-Q/0001045810-22-000147/filing-details.pdf',
};

function App() {
  return (
    <div className="AppContainer">
      <PdfFocusProvider>
        <PDFViewer file={file} />
      </PdfFocusProvider>
    </div>
  );
}

<PdfFocusProvider>
  <PDFViewer containerClassName="your-container-class-name" file={file} />
</PdfFocusProvider>

<PdfFocusProvider>
  <div className="your-layout-class-name">
    <PDFViewer file={file1} />
    <PDFViewer file={file2} />
    <PDFViewer file={file3} />
  </div>
</PdfFocusProvider>

NextJs applications may need to update their configuration to be compatible with react-pdf v9 and pdfjs v4 If you have issues related to canvas, you can add the following to your next.config.js:

module.exports = {
+ webpack: (config) => {
+   config.resolve.alias.canvas = false;

+   return config;
+ },
}

Another common issue is: TypeError: Promise.withResolvers is not a function To fix this issue, you need to use dynamic imports for the PDF component (to indicate to NextJs to use it for client-side rendering only).

- import { PDFViewer, PdfFocusProvider } from "@llamaindex/pdf-viewer";

+ import dynamic from "next/dynamic";

+ // Dynamic imports for client-side rendering only
+ const PDFViewer = dynamic(
+   () => import("@llamaindex/pdf-viewer").then((module) => module.PDFViewer),
+   { ssr: false },
+ );

+ const PdfFocusProvider = dynamic(
+   () =>
+     import("@llamaindex/pdf-viewer").then((module) => module.PdfFocusProvider),
+   { ssr: false },
+ );

When making changes to this project, please follow these steps:

1. Make your code changes
2. Create a changeset to document your changes:
3. Commit your changes and the changeset
4. When ready to release a new version:
5. To publish the new version:

Thanks to the developers of the following dependencies that we're using:

• react-pdf
• @wojtekmaj/react-hooks
• react-window
• react-intersection-observer
• lodash
• fuse.js

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4