Как я могу показать только скриншот первой страницы PDF на странице React?

Question

Я пытаюсь настроить панель мониторинга, которая позволяет пользователям просматривать небольшой предварительный просмотр первой страницы PDF-файла, который они выбирают, без какой-либо другой доступной им функциональности.

Я попытался просто встроить PDF-файл.но это позволит пользователям прокручивать, увеличивать и уменьшать масштаб и т. д. Я не хочу, чтобы у пользователя была эта возможность, он должен видеть только скриншот страницы 1.

Это то, чтоВ данный момент файл выглядит так:

import { makeStyles } from '@material-ui/core/styles';
import { default as Grid } from '@material-ui/core/Grid';
import { default as Paper } from '@material-ui/core/Paper';
import { default as Typography } from '@material-ui/core/Typography';
import { default as React } from 'react';
import Datatable from './components/datatable';
import { obj } from './components/theme';

// Used makeStyles to stylize the paper elements in the page

const useStyles = makeStyles(theme => ({
  button: {
    margin: theme.spacing(1),
  },
  formControl: {
    margin: theme.spacing(1),
  },
  margin: {
    margin: theme.spacing(1),
  },
  paper: {
    padding: theme.spacing(3, 2),
  },
  paper2: {
    padding: theme.spacing(3, 2),
  },
  root: {
    flexGrow: 1,
  },
}));

export const OrdersList: React.FC = () => {

  const classes = useStyles(obj.theme);

  return (
    <div className={classes.root}>
      <Grid container spacing={3}>
        <Grid item xs={9}>
          <br />
          <Datatable />
        </Grid>
        <Grid item xs={3} >
        <br />
          <Paper className={classes.paper2}>
            <Typography variant="h4" component="h3" gutterBottom>Lorem Ipsum</Typography>
            <embed src="pdf_source" width="500" height="375" type="application/pdf"/>
          </Paper>
        <br />
        <br />
        <Paper className={classes.paper2}>
            <Typography variant="h4" component="h3" gutterBottom>Lorem Ipsum</Typography>
            <Typography variant="body1" component="h3" gutterBottom>Lorem Ipsum dolor sit</Typography>
          </Paper>
        </Grid>
      </Grid>
    </div>
  );
};

Answer 1

Вам нужно будет прочитать PDF с JS, чтобы достичь этого. Я бы порекомендовал использовать pdf.js (https://github.com/mozilla/pdf.js) и метод getPage. После этого вы можете установить его где угодно. Вы можете найти его здесь: http://mozilla.github.io/pdf.js/examples/