diegomura / diegomura/react-pdf

Add zoom property to PDFViewer

Open
#1,352 7 comments 2 reactions 0 assignees View on GitHub
good-first-issue new feature
Dominant language
TypeScript
Stars
16.8k
Forks
1.3k
Avg merge
5h 6m
Merged PRs (30d)
52

Description

In my CV renderer at https://cefn.com/cv I wanted to be able to set the zoom level on loading so people can see a bit more of the document at once. It makes the interactive controls a bit more interesting.

I was expecting to be able to pass a zoom string and have that passed to the anchor in the iframe like...

```
src="blob:http://localhost:3000/06813706-6d70-4381-8ac4-af1d17363b70#zoom=50"
```

Since the support wasn't built-in, I added the feature to my project by writing a minimal Typescript clone of the PDFViewer component from the `@react-pdf/renderer` module.

The source code below does everything from the original, but also handles this zoom parameter. It successfully controlled the zoom level in at least Chrome and probably Firefox from what I understand of this anchor behaviour. Copying the code below into their project might be a useful workaround for people who want this behaviour in the short term and provides a proof of concept for adding it as a feature.

In my example I use it like...

```typescript

```

...but you can pass `"50"` as a percentage and maybe some other values.

```typescript
import React, {
CSSProperties,
JSXElementConstructor,
ReactElement,
useEffect
} from "react";
import { usePDF } from "@react-pdf/renderer";

import { PDFVersion } from "@react-pdf/types";

interface OnRenderProps {
blob?: Blob;
}

interface DocumentProps {
title?: string;
author?: string;
subject?: string;
creator?: string;
keywords?: string;
producer?: string;
language?: string;
pdfVersion?: PDFVersion;
onRender?: (props: OnRenderProps) => any;
}

interface PDFViewerProps {
title?: string;
width?: number | string;
height?: number | string;
style?: CSSProperties;
className?: string;
children?: React.ReactElement;
innerRef?: React.Ref;
zoom?: string;
}

export const PDFZoomViewer = ({
title,
style,
className,
children,
innerRef,
zoom,
...props
}: PDFViewerProps) => {
const [instance, updateInstance] = usePDF({
document: children as ReactElement<
DocumentProps,
string | JSXElementConstructor
>
});

useEffect(updateInstance, [children]);

return (

);
};

```

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.