このリポジトリは2023-09-09にアーカイブされています。 ファイルの閲覧とクローンは可能ですが、プッシュ、イシューの作成、プルリクエストはできません。
2021-12-19 04:16:16 +09:00
|
|
|
import React, { useEffect, useState } from 'react';
|
|
|
|
import { Document, Page} from "react-pdf";
|
|
|
|
|
|
|
|
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 (
|
2021-12-19 09:34:19 +09:00
|
|
|
<div className="p-file-for" style={{ height: height, marginTop:'15px' }}>
|
2021-12-19 04:16:16 +09:00
|
|
|
{
|
|
|
|
pdf_url &&
|
|
|
|
<Document file={pdf_url} loading={<></>}>
|
|
|
|
<Page
|
|
|
|
className={'position-relative'}
|
|
|
|
pageNumber={1}
|
2021-12-19 09:34:19 +09:00
|
|
|
height={height}
|
2021-12-19 04:16:16 +09:00
|
|
|
loading={<></>}
|
2021-12-19 09:34:19 +09:00
|
|
|
renderMode='svg'
|
2021-12-19 04:16:16 +09:00
|
|
|
/>
|
|
|
|
</Document>
|
|
|
|
}
|
|
|
|
</div>
|
|
|
|
)
|
|
|
|
}
|
|
|
|
|
|
|
|
export default PreviewPDF;
|