1.0.41 • Published 6 months ago
react-rel-pdfviewer v1.0.41
you must copy these file in "/node_modules/react-pdf/dist/pdf.worker.js " in CRA public folder
- file list
pdf.worker.js
pdf.worker.js.map
pdf.worker.min.js
import React from "react";
import './App.scss';
import PDFviewModal from 'react-rel-pdfviewer';
function App() {
const [viewpercent, set_viewpercent] = React.useState(100);
const openFullscreen = () => {
var elem = document.documentElement;
if (elem.requestFullscreen) {
elem.requestFullscreen();
} else if (elem.webkitRequestFullscreen) { // Chrome, Safari & Opera
elem.webkitRequestFullscreen();
} else if (elem.mozRequestFullScreen) { // Firefox
elem.mozRequestFullScreen();
} else if (elem.msRequestFullscreen) { // IE/Edge
elem.msRequestFullscreen();
}
}
const cancelFullScreen = () => {
var el = document;
var requestMethod = el.cancelFullScreen || el.webkitCancelFullScreen || el.mozCancelFullScreen || el.exitFullscreen || el.webkitExitFullscreen;
if (requestMethod) { // cancel full screen.
requestMethod.call(el);
}
// } else if (typeof window.ActiveXObject !== "undefined") { // Older IE.
// var wscript = new ActiveXObject("WScript.Shell");
// if (wscript !== null) {
// wscript.SendKeys("{F11}");
// }
// }
}
const pdfviewref= React.useRef();
const fileRef = React.useRef();
const [previewURL, set_previewURL] = React.useState("");
const [file, set_file] = React.useState(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;
}
if (previewURL) {
console.log("메모리해제");
window.URL.revokeObjectURL(previewURL);
console.log("메모리끝");
}
let tmpfile = e.target.files[0];
set_file(tmpfile);
}
const handleOpenPreview = () => {
if (!file) return;
// console.log("파일", file);
let logoURL = window.URL.createObjectURL(file);
// console.log(logoURL);
openFullscreen();
set_previewURL(logoURL);
}
const handleScrollCallback = (s)=>{
// console.log("s콜백",s);
}
const handlePageCallback = (p)=>{
// console.log("p콜백",p)
}
//
const handlePDFCallback = (d)=>{
console.log("pdf사이즈콜백",d)
}
return (
<div className="App">
<div className="tempFileZone">
{file && <> {`임시파일이름 : ${file.name}`} <button className="deletefilebtn" onClick={() => set_file(null)}>삭제</button></>}
<input ref={fileRef} style={{ display: 'none' }}
// accept=".pdf"
accept="application/pdf"
type="file" onChange={handleAddFile} />
<button
className="btn"
onClick={() => {
fileRef.current.value = "";
fileRef.current.click();
}}>내컴퓨터에서 찾기</button>
<button onClick={handleOpenPreview}>
미리보기
</button>
</div>
<button onClick={()=>{
console.log(pdfviewref);
pdfviewref.current.set_pageNumber(2);
}}>page 2</button>
<button onClick={()=>{
console.log(pdfviewref);
pdfviewref.current.set_scrollTop(100);
}}>scroll100</button>
<button onClick={()=>{
console.log("사이즈",pdfviewref.current.get_pdfSize());
}}>pdfsize콜백</button>
<button onClick={()=>{
let sizeobj = pdfviewref.current.get_pdfSize();
let canvasref =pdfviewref.current.get_canvasRef();
let canvas = canvasref.current;
console.log(canvas);
let rctx = canvas.getContext('2d');
let cw = sizeobj.PDF.width * 1;
let ch = sizeobj.PDF.height * 1;
let r = sizeobj.PDF.width * 0.01 * 1;
rctx.clearRect(0, 0, cw, ch);
rctx.beginPath();
rctx.lineWidth = 0.5;
rctx.strokeStyle = 'rgb(255,0,0,0.3)';
rctx.fillStyle = 'rgb(255,0,0,0.3)';
rctx.arc((0.1) * cw,(0.1) * ch, r , 0, Math.PI * 2);
rctx.fill();
rctx.beginPath();
rctx.lineWidth = 0.5;
rctx.strokeStyle = 'rgb(255,0,0,0.3)';
rctx.fillStyle = 'rgb(255,0,0,0.3)';
rctx.arc((0.2) * cw,(0.1) * ch, r , 0, Math.PI * 2);
rctx.fill();
rctx.stroke();
}}>canvas위에그리기</button>
{previewURL &&
<>
<div className="PDFpreView">
<PDFviewModal
ref={pdfviewref}
path={previewURL}
showViewMode={true}
viewpercent={viewpercent}
set_viewpercent={set_viewpercent}
onClose={() => {
cancelFullScreen();
// console.log("메모리해제")
window.URL.revokeObjectURL(previewURL);
set_previewURL(null);
}}
scrollCallback={handleScrollCallback} //스크롤 바뀔때 콜백
pageCallback={handlePageCallback} //page 바뀔때 콜백
pdfSizeCallback={handlePDFCallback} //PDF 사이즈 바뀔때 콜백
/>
</div>
</>
}
</div>
);
}
export default App;
1.0.41
6 months ago
1.0.39
10 months ago
1.0.38
10 months ago
1.0.26
11 months ago
1.0.25
11 months ago
1.0.24
11 months ago
1.0.23
11 months ago
1.0.29
11 months ago
1.0.28
11 months ago
1.0.27
11 months ago
1.0.33
11 months ago
1.0.32
11 months ago
1.0.31
11 months ago
1.0.30
11 months ago
1.0.37
11 months ago
1.0.36
11 months ago
1.0.35
11 months ago
1.0.34
11 months ago
1.0.22
1 year ago
1.0.19
1 year ago
1.0.18
1 year ago
1.0.17
1 year ago
1.0.16
1 year ago
1.0.21
1 year ago
1.0.20
1 year ago
1.0.15
1 year ago
1.0.14
2 years ago
1.0.13
2 years ago
1.0.12
2 years ago
1.0.11
2 years ago
1.0.10
2 years ago
1.0.9
2 years ago
1.0.8
2 years ago
1.0.7
2 years ago
1.0.6
2 years ago
1.0.5
2 years ago
1.0.4
2 years ago
1.0.3
2 years ago
1.0.2
2 years ago
1.0.1
2 years ago
1.0.0
2 years ago