如何将现有的 pdf 文件添加到我的 React.js 页面？

Question

有人可以向我解释我应该如何将现有的 pdf 文件添加到我的 React 网页中吗？

Answer 1

I developed this component for using in my projects

import React, { Component } from "react";
import Axios from 'axios';


class DPFReportViewer extends Component {
    _isMounted = false;

    constructor(props) {
        super(props);
        this.state = {
            PdfURL: ""
        };

    }

    componentWillUnmount() {
        this._isMounted = false;
    }

    componentDidMount() {
        this._isMounted = true;
        this.setState({ PdfURL: '' });        

        Axios.post(
            '/Report/RunReport/',{ FileName: this.props.repFileName }, { 
                responseType: 'arraybuffer',
                headers: {
                     'Accept': 'application/pdf'
                }
        ).then((response) => {
            if (this._isMounted && response.data) {
                let blob = new Blob([response.data], { type: 'application/pdf' })
                let fileURL = window.URL.createObjectURL(blob);                    
                this.setState({ PdfURL: fileURL });
         }
        }).catch(error => {         
            console.log(error);
        })
    }

    render() {
        return (<div>
            <embed src={this.state.PdfURL} width="100%" height="500px" type="application/pdf" style={{ overflow: "auto", width: "100%", height: "500px", border: "1px groove  rgba(0, 0, 0, 0.5)" }} />
        </div>
        )
    }
};

export default DPFReportViewer;