Загрузка...

How to fix it?

Thread in Node.js created by AntiSempai Oct 11, 2023. (bumped Oct 11, 2023) 124 views

  1. AntiSempai
    AntiSempai Topic starter Oct 11, 2023 guest я слежу за тобой 35 May 13, 2022
    Код работает, но когда я нажимаю кнопку «Search », я получаю эту ошибку.​
    [IMG]

    App.js:​
    JS
    import React, { useState, useRef } from 'react'
    
import ReactDOM from 'react-dom'
    
import * as pdfjsLib from 'pdfjs-dist'
    

    
import './App.css'
    

    

    

    
function App() {
    
  const [pdfURL, setPdfURL] = useState(null)
    
  const inputTextRef = useRef(null)
    

    
    const searchFunction = text => {
    
        console.log('Search Text:', text)
    
        const information = document.querySelectorAll('.searchDiv')
    
        console.log('Elements:', information)
    
        information.forEach(element => {
    
            if (element.textContent.includes(text)) {
    
                console.log('Matched Element:', element)
    
                element.classList.add('animationElement')
    
                setTimeout(() => {
    
                    element.classList.remove('animationElement')
    
                }, 2000)
    
            }
    
        })
    
    }
    

    
    const openPdf = () => {
    
        const input = document.createElement('input')
    
        input.type = 'file'
    
        input.accept = 'application/pdf'
    

    
        input.addEventListener('change', async event => {
    
            const file = event.target.files[0]
    

    
            if (file) {
    
                const fileURL = URL.createObjectURL(file)
    
                setPdfURL(fileURL)
    

    
                
    
            }
    
        })
    

    
        input.click()
    
    }
    

    

    
    const searchPdf = async text => {
    
        if (!pdfURL) {
    
            alert('Please open a PDF first.')
    
            return
    
        }
    

    
        try {
    
            const pdf = await pdfjsLib.getDocument(pdfURL).promise
    
            const maxPages = pdf.numPages
    

    
            for (let pageNum = 1; pageNum <= maxPages; pageNum++) {
    
                const page = await pdf.getPage(pageNum)
    
                const pageText = await page.getTextContent()
    

    
                pageText.items.forEach(item => {
    
                    const itemText = item.str
    
                    if (itemText.includes(text)) {
    
                        
    
                        console.log('Match found on page', pageNum)
    
                    }
    
                })
    
            }
    
        } catch (error) {
    
            console.error('Error searching PDF:', error)
    
        }
    
    }
    

    
    const downloadBasicPdf = () => {
    
        alert('In development')
    
    }
    

    
    const openBasicPdf = () => {
    
        alert('In development')
    
    }
    

    
    const handleSubmit = e => {
    
        e.preventDefault()
    
        const searchText = inputTextRef.current.value
    
        searchFunction(searchText)
    
        searchPdf(searchText)
    
    }
    

    
    return (
    
        <div className='App'>
    
            <header className='App-header'>
    
                <h1>PDF View</h1>
    
                <div className='buttons-container'>
    
                    <button onClick={openPdf}>Open PDF</button>
    
                    <button onClick={downloadBasicPdf}>Download Basic PDF</button>
    
                    <button onClick={openBasicPdf}>Open Basic PDF</button>
    
                    <form onSubmit={handleSubmit}>
    
                        <input type='text' ref={inputTextRef} />
    
                        <input type='submit' value='search' />
    
                    </form>
    
                </div>
    
            </header>
    
            {pdfURL && (
    
                <iframe src={pdfURL} title='PDF Viewer' width='100%' height='1250px' />
    
            )}
    
        </div>
    
    )
    
}
    

    
ReactDOM.render(<App />, document.getElementById('root'))
    
export default App
    App.css​
    CSS
    @import '@react-pdf-viewer/core/lib/styles/index.css';
    

    

    
.App {
    
  text-align: center;
    
}
    

    

    
.App-header {
    
  background-color: #282c34;
    
  padding: 20px;
    
  display: flex;
    
  flex-direction: column;
    
  align-items: center;
    
  justify-content: center;
    
  font-size: calc(10px + 2vmin);
    
  color: white;
    
}
    

    
.buttons-container {
    
  margin-top: 20px;
    
}
    

    
button {
    
  background-color: #61dafb;
    
  color: white;
    
  border: none;
    
  padding: 10px 20px;
    
  margin: 5px;
    
  cursor: pointer;
    
}
    

    

    
button:hover {
    
  background-color: #45aaf2;
    
}
    

    
.search {
    
  margin-top: 20px;
    
  display: flex;
    
  justify-content: center;
    
  align-items: center;
    
}
    

    
.search input[type='text'] {
    
  padding: 10px;
    
  border: 1px solid #ccc;
    
  border-radius: 4px;
    
  margin-right: 10px;
    
  width: 200px;
    
}
    

    
.search input[type='submit'] {
    
  background-color: #61dafb;
    
  color: white;
    
  border: none;
    
  padding: 10px 20px;
    
  cursor: pointer;
    
}
    

    
.search input[type='submit']:hover {
    
  background-color: #45aaf2;
    
}
    

    
.pdf-container {
    
  width: 100%;
    
  max-width: 800px;
    
  margin: 0 auto;
    
}
    

    
.page-controls {
    
  display: flex;
    
  justify-content: center;
    
  align-items: center;
    
  margin-top: 16px;
    
}
    

    
.page-controls button {
    
  margin: 0 8px;
    
  padding: 8px 16px;
    
  background-color: #007bff;
    
  color: white;
    
  border: none;
    
  cursor: pointer;
    
}
    

    
.page-controls button:hover {
    
  background-color: #0056b3;
    
}
     
    Oct 11, 2023
  2. TRUEC0DER
    Who's liked this post (1)
    TRUEC0DER Oct 11, 2023 22 Apr 8, 2019
    Тебе надо импортировать
    JS
    import pdfjsLibWorker from 'pdfjs-dist/build/pdf.worker.min'
    и после импортов добавить строку
    JS
    pdfjsLib.GlobalWorkerOptions.workerSrc = pdfjsLibWorker
    В итоге должно получиться примерно так:
    JS
    import React, { useState, useRef } from 'react'
    
import ReactDOM from 'react-dom'
    
import * as pdfjsLib from 'pdfjs-dist'
    
import pdfjsLibWorker from 'pdfjs-dist/build/pdf.worker.min'
    

    
import './App.css'
    

    
pdfjsLib.GlobalWorkerOptions.workerSrc = pdfjsLibWorker
     
    Oct 11, 2023
    1. AntiSempai Topic starter
      Oct 12, 2023
Loading...
Top