Question

如何使用React.js或web显示PFD / docx / xls / jpg文件的文件预览？

之前已经问过这个问题，但没有人回答，所以我试图引起更多关注： React File Preview (FIREBASE)

有人请回答。

Answer 1

您可以使用来加载任何图像的预览（虽然不是PDF / Docx）。 FileReader类。

该类将加载预览并在完成后执行回调，您可以在其中设置组件的状态。

工作示例：

class PicturePreview extends React.Component {
    constructor(props) {
        super(props)

        this.state = {
            preview: ''
        }
    }

    fileUploaded = ev => {
        const reader = new FileReader()
        reader.readAsDataURL(ev.target.files[0])
        reader.onloadend = ev => {
            this.setState({ preview: reader.result })
        }
    }

    render() {
        const { preview } = this.state

        return (
            <div>
                <input type='file' onChange={this.fileUploaded} />
                {preview && <img className='previewFile' src={preview} alt='preview' />}
            </div >
        )
    }
}

ReactDOM.render(<PicturePreview/>, document.getElementById('root'))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.5.2/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.5.2/umd/react-dom.production.min.js"></script>
<div id='root'>

React：PFD / docx / xls / jpg的文件预览

1 个答案: