I'm new here.
I can view PDF file on my website, but I can't highlight keywords in PDF and I don't figure out what problem is.
import { Worker, Viewer } from '@react-pdf-viewer/core';
import { pdfjs } from 'react-pdf';
import { highlightPlugin } from '@react-pdf-viewer/highlight';
import '@react-pdf-viewer/core/lib/styles/index.css';
import '@react-pdf-viewer/highlight/lib/styles/index.css';
this is a chatting robot bases on Lang chain.
so below is my code and I skip something irrelative to my main question "PDF HIGHLIGHT".
function App() {
const [fileUrl, setFileUrl] = useState(null);
const [keywords, setKeywords] = useState([]);
const highlightPluginInstance = highlightPlugin({ keywords });
useEffect(() => {
console.log("highlightPluginInstance:", highlightPluginInstance);
}, [highlightPluginInstance]);
const handleSendMessage = async (e) => {
.then(function (response){
const resp = status === 200 ? response.data.response : '暫時無法解析您的問題';
const source = response.data.source;
if (response.data.source && response.data.source.length > 0) {
// 如果有來源數據,那麼更新 sourceItems 和 sourceAvailable 的狀態
setSourceItems(response.data.source);
setSourceAvailable(true);
const keywordsData = ['若三日'];
setKeywords(keywordsData);
response.data.source.forEach((sourceItem, index) => {
const pattern = /01通則_all整理後_500\.csv/;
if (pattern.test(sourceItem)) {
setFileUrl("/path/to/doc.pdf");
setSelectedIndex(index);
}
})
}else {
setSourceItems([]);
setSourceAvailable(false);
}
}
}
}
Next is 'return()'
return (
{fileUrl && (
<div style={{ width: '100%', height: '700px' }}> {/* 调整尺寸以适合您的布局 */}
<Worker workerUrl={`//cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjs.version}/pdf.worker.js`}>
<Viewer
fileUrl={fileUrl}
plugins={[highlightPluginInstance]}
onDocumentLoad={() => {
// 確保在文檔加載後再設置關鍵詞
setKeywords(keywords);
}}/>
</Worker>
</div>
)}
{message.sourceAvailable && (
<>
<hr />
<div className="mt-3 flex flex-row gap-2">
{message.sourceItems.map((source, index) => (
<button
key={index}
className="bg-gray-200 hover:bg-finalbluu text-black p-2 rounded btn-animate transition-custom"
onClick={() => {
setSelectedIndex(index);
setCurrentSourceItems(message.sourceItems);
setSourceOpen(true);
}}>
資料來源
</button>
))}
)
p.s.: cuz the website includes voice function that needs to import react-mic, but it doesn't support react 18, it just support 16 (?) i'm not sure. Does someone have same problem?