使用 HTML/Angular 预览位于 AWS 中的 pdf 下载文件而不是显示它

Question

我正在尝试在 HTML 中预览 PDF，但我只能下载它。 PDF 位于 S3 中，我可以使用 URL 访问它。我遇到的问题是 URL 返回“303 See Other”代码，而实际 URL 位于“Location”标头中。 同样，如果我使用“位置”中的 URL，则会导致文件下载而不是预览。

以下代码应该可以工作，但它会下载文件

<object class="pdf" 
            data="https://my-url"
            width="800"
            height="500">
</object>

我也尝试将其嵌入到 Google 查看器中，但它显示的不是 PDF，而是奇怪的内容：

有人遇到过类似的问题并且能够解决吗？

谢谢！

我尝试过使用不同的标签，嵌入具有相似结果的观看者。例如：

    //this.html = "bliblibli <hr> <iframe [src]='"+this.fileUrl +"' width=\"640\" height=\"360\" frameborder=\"0\" webkitallowfullscreen mozallowfullscreen allowfullscreen> </iframe>";
    //this.html = "<hr><embed src= \"https://drive.google.com/viewerng/viewer?embedded=true&url="+this.fileUrl+"\" width=\"500\" height=\"375\" type=\"application/pdf\"><hr>"+this.fileUrl; 
    //this.html = "<hr><iframe src= \"https://drive.google.com/viewerng/viewer?embedded=true&url="+this.fileUrl+"\" width=\"500\" height=\"375\" type=\"application/pdf\"></iframe>"; 
    //this.html = "<embed src=\" "+this.fileUrl+"  \" class=\"pdf-content\"/>";
    this.html = "<object class=\"pdf\" id=\"fgh\" data=\""+this.fileUrl+"\"  width=\"400\" height=\"400\"></object>"

Answer 1

例如，您可以使用类似的解决方案，如下所示：https://pdfviewer.net/extended-pdf-viewer/simple