时间戳

首页 > 解决方案 > reactjs如何显示pdf文件

javascript - reactjs如何显示pdf文件

问题描述

我正在尝试在应用程序中显示 pdf 文件。当我上传文件时，在上传之前，我正在使用标签显示预览并且它正在正确显示。但是当我从后端接收数据时，那时我正在显示所有媒体，一切都得到正确显示，例如图像和视频。但是当我将文档添加到标签中时，会显示空白。

预览代码：

            {data.documents &&
              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 &&
              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 变量，我收到了一个带有文件名的对象数组，其中包含后端文件夹的媒体文件夹和特定文件名的路径。

标签： javascriptreactjs

解决方案

<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

推荐阅读