Question

我正在尝试建立一个仪表板，以使用户可以看到他们选择的pdf第一页的小预览，而没有其他可用的功能。

我尝试仅嵌入pdf，但这将允许用户滚动，放大和缩小等。我不希望用户具有此功能，他们应该只能看到第1页的屏幕截图。< / p>

文件的当前外观如下：

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

您将需要使用JS阅读pdf来实现。我建议使用pdf.js（https://github.com/mozilla/pdf.js）和getPage方法。之后，您可以随时随地进行设置。您可以在这里找到它：http://mozilla.github.io/pdf.js/examples/

如何仅在React页面中显示pdf第一页的屏幕截图？

1 个答案: