v1.5.0
New features
- Highlight given keyword in the first render
<Viewer
fileUrl='/path/to/document.pdf'
// The `keyword` option can be a string or a regular expression
// keyword='PDF Library'
keyword={new RegExp('pdf document', 'i')}
/>
- Add new SVG layer which can be used to replace the canvas layer
const renderPage = (props: RenderPageProps) => {
return (
<>
{props.svgLayer.children}
{props.textLayer.children}
{props.annotationLayer.children}
</>
);
};
<Viewer
fileUrl='/path/to/document.pdf'
renderPage={renderPage}
/>
- Customize page renderer. The following code adds a simple Draft watermark at the center of every page:
const renderPage: RenderPage = (props: RenderPageProps) => (
<>
{props.canvasLayer.children}
<div
style={{
alignItems: 'center',
display: 'flex',
height: '100%',
justifyContent: 'center',
left: 0,
position: 'absolute',
top: 0,
width: '100%',
}
}>
<div
style={{
color: 'rgba(0, 0, 0, 0.2)',
fontSize: `${8 * props.scale}rem`,
fontWeight: 'bold',
textTransform: 'uppercase',
transform: 'rotate(-45deg)',
userSelect: 'none',
}}
>
Draft
</div>
</div>
{props.annotationLayer.children}
{props.textLayer.children}
</>
);
<Viewer
fileUrl='/path/to/document.pdf'
renderPage={renderPage}
/>
Improvements
- The default scale can be a special zoom level. For example, we can fit page in the container initially:
<Viewer
fileUrl='/path/to/document.pdf'
defaultScale={SpecialZoomLevel.PageFit}
/>
- The
fileUrl
option can beUint8Array
:
<Viewer
fileUrl={new Uint8Array([...])}
/>
- Add styles for error message