Блог

Главная - Вопросы по программированию - Как отображать PDF-файлы в react js

Как отображать PDF-файлы в react js

#javascript #reactjs

Вопрос:

Я пытаюсь отобразить PDF-файлы в приложении. Когда я загружаю файлы и перед загрузкой, я показываю предварительный просмотр с помощью тега, и он отображается правильно. Но когда я получаю данные из бэкенда, в это время я показываю все носители, все отображается правильно, например, изображения и видео. Но когда я добавляю документы в тег, отображается пробел.

Код для предварительного просмотра :

             {data.documents amp;amp;
              data.documents.map((doc, id) => (
                <Card>
                  <CardHeader
                    action={
                      <IconButton
                        style={{ float: "right" }}
                        onClick={(doc) =>
                          dispatch({ type: USER_DOCUMENT_DELETE, payload: id })
                        }
                      >
                        <CloseRounded color="secondary" />
                      </IconButton>
                    }
                  />

                  <iframe
                    width="200"
                    height="150"
                    title={doc.url}
                    src={doc.url}
                  />
                  <CardContent>
                    <Typography>{doc.name}</Typography>
                  </CardContent>
                </Card>
              ))}

код для отображения данных:

    {reducedDocuments amp;amp;
              reducedDocuments.map((document) => (
                <Card
                className={classes.postMedia}
                onClick={() => {
                  dispatch({
                    type: SHOW_POST_MEDIA_PREVIEW,
                    payload: {
                      id: post.id,
                      showPreview: true,
                    },
                  });
                }}>
                   <iframe
                   
                    src={process.env.REACT_APP_BACKEND_FILE_PREVIEW   document.file_name}
                  />

                </Card>
              ))}

для src я задал переменную .env, я получаю массив объектов с именем файла, который содержит путь к папке мультимедиа внутренней папки и конкретное имя файла.

Комментарии:

1. Вы можете использовать: npmjs.com/package/react-pdf для отображения PDF-файлов.

2. Я не хочу использовать внешнюю библиотеку. Есть ли какой-нибудь другой способ?

3. React-это внешняя библиотека. Почему вы так непреклонны в том, чтобы не использовать еще один?

4. Приложение становится все тяжелее, у меня уже установлено несколько пакетов. Вот почему я не использую никакой пакет

Ответ №1:

 <object width="100%" height="400" data="Put your pdf url here" type="application/pdf">   </object>

Вы можете использовать <object> тег для отображения PDF-файла.
https://www.w3schools.com/tags/tag_object.asp

Метки: