Question

我很难弄清楚如何预览使用react dropzone上传的PDF。 PNG和JPG可以完美运行，但我也想向用户展示pdf本身或pdf图像。

这是我的代码：

handleImageDrop =（文件）=> {

const currentFile = files[0]
const reader = new FileReader()
reader.addEventListener("load", () => {
    this.setState({
      imgSrc: reader.result
    })
}, false)

reader.readAsDataURL(currentFile)

}

render（）{

const { imgSrc } = this.state;

    <div>
      <Dropzone
        onDrop={this.handleImageDrop}
        multiple={false}>
          {({getRootProps, getInputProps}) => {
            return (
              <div
                {...getRootProps()}
              >
                <input {...getInputProps()} />
                {
                <p>Try dropping some files here, or click to select files to upload.</p>
                }
              </div>
            )
        }}
      </Dropzone>
      { imgSrc ? <img src={imgSrc}/> : null}
    </div>
</div>
)

} }

Answer 1

它不能像在<img>标签中显示图像那样简单，但是您可以尝试一些外部库来显示pdf文件。可以尝试使用react-pdf

Answer 2

我使用PDF.js渲染PDF文件。我使用画布元素设置了自定义预览模板，并在“ init”配置中添加了一个函数，该函数会在添加文件时触发，并使用PDF.js在画布上绘制文件的第一页。

如何使用React Dropzone预览pdf

2 个答案: