react-pdf-quizmanager
npm install react-pdf-quizmanager
import React, { useMemo, useRef, useState } from 'react';
import { useCallback } from 'react';
import "./App.scss"
import { PDFEnrollQuiz, PDFPlayQuiz } from 'react-pdf-quizmanager';
import type { Coordinate, PDFPlayQuizProps } from 'react-pdf-quizmanager';
function App() {
const [tempAOI, setTempAOI] = useState([
[{
x: 6,
y: 32,
width: 33,
height: 10,
id: '1234',
type: "MC", // 객관식 Multiple Choice
name: "객관식(1-1)",
quizOptionCount: 3, //(1~10 선택가능)
correctAnswer: 1, //1번이 정답 0번은 정답없음
}, {
x: 6,
y: 43,
width: 42,
height: 14,
id: '5678',
type: "SJ", //주관식 Subject
name: "주관식(1-2)",
correctAnswer: "",
}], //1번페이지 없는페이지는 자동생성
])
const [file, set_file] = useState(null);
const [pdfURL, set_pdfURL] = useState("");
const handleDocumentLoadCallback = useCallback((pages: number) => {
console.log("콜백옴 page수", pages);
// set_maxPageNumber(pages);
}, []);
const option = useMemo(() => {
//pdf 고유의 사이즈를 무시, 현제의 width기준으로 랜더
return {
pageViewOption: {
initViewPercent: '50%',
},
previewOption: {
initLeftPreviewshow: true,
pageMargin: 40, //preview 의 작은 PDF의 pagemargin
wrapperStyle: { //PDF preview의 껍데기 width입니다
width: 200,
// outline:"5px solid red"
}
}
};
}, [])
const [pdfName, set_pdfName] = useState("이것은PDF파일이름");
const fileRef = useRef(null);
const handleAddFile = (e) => {
// console.log(e.target.files[0]);
//if (!e.target.files[0]) return;
if (e.target.files[0].type !== 'application/pdf') {
// Swal.fire("지원하지 않는 확장자 입니다");
return;
}
const tmpfile = e.target.files[0];
set_file(tmpfile);
}
const handleOpenPreview = () => {
if (!file) return;
const logoURL = window.URL.createObjectURL(file);
set_pdfURL(prev => {
if (prev) {
console.log("메모리해제");
window.URL.revokeObjectURL(prev);
console.log("메모리끝");
}
return logoURL
});
}
const [playOption, set_playOption] = useState(null);
// console.log("tempAOI",tempAOI)
return (
{pdfURL}
{file && <> {임시파일이름 : ${file.name}} >}
accept="application/pdf"
type="file" onChange={handleAddFile} />
className="btn"
onClick={() => {
if (fileRef.current) {
fileRef.current.value = "";
fileRef.current.click();
}
}}>내컴퓨터에서 찾기
(테스트)파일열기
{pdfURL &&
{/ // /}
path={pdfURL}
AOI={tempAOI}
option={option}
pdfInform={{
fileName: pdfName
}}
PDFDocumentOnLoadCallback={handleDocumentLoadCallback}
onCloseCallback={() => {
set_pdfURL(prev => {
if (prev) {
console.log("메모리해제");
window.URL.revokeObjectURL(prev);
console.log("메모리해제끝");
}
return ""
});
}}
onSaveCallback={(newAOI: Coordinate[][], newFileName: string) => {
setTempAOI(newAOI);
set_pdfName(newFileName);
}}
/>
}
{playOption &&
path={playOption.path}
AOI={playOption.AOI}
PDFDocumentOnLoadCallback={() => {
}}
onCloseCallback={(saveAOI:Coordinate[][],duration:number) => {
console.log("저장할응답결과", saveAOI)
console.log("측정시간",duration)
set_playOption((prev: PDFPlayQuizProps | null) => {
if (prev) {
console.log("메모리해제");
window.URL.revokeObjectURL(prev.path);
console.log("메모리해제끝");
}
return null
});
}}
/>
}
)
}
export default App;
``