javascript - 如何使用 react dropzone 预览 pdf

Question

我很难弄清楚如何预览我正在使用react-dropzone. PNG 和 JPG 工作得很好，但我也希望能够向用户展示 pdf 本身或 pdf 的图像。

这是我的代码：

  handleImageDrop = (files) => {

    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 在画布上绘制文件的第一页。