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

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

最佳答案

我开发了此组件以在项目中使用

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;

关于javascript - 如何将现有的pdf文件添加到我的React.js页面？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/59512796/