このリポジトリは2023-09-09にアーカイブされています。 ファイルの閲覧とクローンは可能ですが、プッシュ、イシューの作成、プルリクエストはできません。
2021-12-19 04:16:16 +09:00
|
|
|
import React, { useEffect, useState } from 'react';
|
2022-01-14 18:29:19 +09:00
|
|
|
import { Document, Page, pdfjs} from "react-pdf";
|
|
|
|
pdfjs.GlobalWorkerOptions.workerSrc = `//cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjs.version}/pdf.worker.min.js`;
|
2021-12-19 04:16:16 +09:00
|
|
|
|
|
|
|
const PreviewPDF = ({pdf_url}) => {
|
|
|
|
|
2021-12-19 09:34:19 +09:00
|
|
|
const [height, setHeight] = useState(350);
|
|
|
|
|
|
|
|
useEffect(() => {
|
|
|
|
setHeight(document.querySelector('.p-file-for').clientWidth);
|
|
|
|
const resizeListener = () => {
|
|
|
|
setHeight(document.querySelector('.p-file-for').clientWidth);
|
|
|
|
};
|
|
|
|
window.addEventListener('resize', resizeListener);
|
|
|
|
return () => {
|
|
|
|
window.removeEventListener('resize', resizeListener);
|
|
|
|
}
|
|
|
|
}, [])
|
|
|
|
|
|
|
|
|
2021-12-19 04:16:16 +09:00
|
|
|
return (
|
2022-01-05 15:37:48 +09:00
|
|
|
<div className="p-file-for"
|
|
|
|
style={{
|
|
|
|
height: height,
|
|
|
|
marginTop:'15px',
|
|
|
|
display:'flex',
|
|
|
|
alignItems:'center',
|
|
|
|
justifyContent:'center',
|
|
|
|
position:'relative',
|
|
|
|
overflow: 'hidden'
|
|
|
|
}}>
|
2021-12-19 04:16:16 +09:00
|
|
|
{
|
|
|
|
pdf_url &&
|
|
|
|
<Document file={pdf_url} loading={<></>}>
|
|
|
|
<Page
|
|
|
|
pageNumber={1}
|
|
|
|
loading={<></>}
|
2022-01-13 22:31:19 +09:00
|
|
|
renderMode='canvas'
|
|
|
|
height={height}
|
2021-12-19 04:16:16 +09:00
|
|
|
/>
|
|
|
|
</Document>
|
|
|
|
}
|
|
|
|
</div>
|
|
|
|
)
|
|
|
|
}
|
|
|
|
|
|
|
|
export default PreviewPDF;
|