首页 > 解决方案 > reactJS 从外部存储库打开一个 .pdf 文件

问题描述

我在 S3 实例中的 AWS 上托管了一个 reactJS 应用程序。我还有一个托管在 AWS 上的网站,位于不同的 S3 实例中。在网站上,我托管了一堆 .pdf 文件。假设我有 3 个 .pdf 文件位于:

https://www.mywebsite.com/pdffiles/file001.pdf https://www.mywebsite.com/pdffiles/file002.pdf https://www.mywebsite.com/pdffiles/file003.pdf

有没有办法为我的 reactJS 应用程序用户提供一系列指向外部 .pdf 文件的链接?我尝试了以下代码:

renderDocuments = () => {  
    return (
        <div>
            <div className="documents_background">
                <div className="row">
                    <div className="col-12 text-left text_14">
                        <label>Below are the links to the participant forms we have available for download.&nbsp;&nbsp;The forms are
                        in .pdf format.&nbsp;&nbsp;You will need to have Adabe Acrobat Reader installed in order to view these files.</label>
                    </div>
                </div>
                <div className="row">
                    <div className="col-9 text-left text_14">
                        <label>Form 1</label>
                    </div>
                    <div className="col-2 text-right text_14">
                        <a href="https://www.mywebsite.com/pdffiles/file001.pdf" Target="_blank" >Download</a>
                    </div>
                    <div className="col-1">
                    </div>
                </div>
                <div className="row">
                    <div className="col-9 text-left text_14">
                        <label>Form 2</label>
                    </div>
                    <div className="col-2 text-right text_14">
                        <a href="https://www.mywebsite.com/pdffiles/file002.pdf" Target="_blank" >Download</a>
                    </div>
                    <div className="col-1">
                    </div>
                </div>
                <div className="row">
                    <div className="col-9 text-left text_14">
                        <label>Form 3</label>
                    </div>
                    <div className="col-2 text-right text_14">
                        <a href="https://www.mywebsite.com/pdffiles/file003.pdf" Target="_blank" >Download</a>
                    </div>
                    <div className="col-1">
                    </div>
                </div>
            </div>
        </div>
    )
}

当我单击表格 1 的超链接时,我在 console.log 中得到以下信息:

资源解释为文档,但使用 MIME 类型 application/pdf 传输:“ https://www.accurecord-direct.com/dotnet/PDFFILES/VSTA/vstm_enrollment_form.pdf

.pdf 文件没有打开,应用程序只是坐在那里等待。

谢谢。

标签: reactjspdf

解决方案


推荐阅读