在嵌入标签中显示从数据库下载的 pdf 文件答案

【问题标题】：Display pdf file downloaded from database in an embed tag在嵌入标签中显示从数据库下载的 pdf 文件
【发布时间】：2021-03-04 15:38:56
【问题描述】：

我们正在尝试以字节数组格式从数据库中获取 pdf 文件。当用户点击显示按钮时，它应该显示在屏幕顶部的嵌入标签中。但是当我们将字节数组转换为base64string时，它不会出现在嵌入文件中。

<td>
@Html.DisplayFor(modelItem => item.File)
<a href="#" onclick="OpenPDF();">Display</a>
</td>

当用户按下显示按钮时，OpenPDF 脚本将打开：

            <script type="text/javascript">
            function OpenPDF() {

                document.getElementById("pdfBack").style.visibility = "visible";
                document.getElementById("pdfDialog").style.visibility = "visible";
                document.getElementById("pdfFile").setAttribute("src", "data:application/pdf;base64," + @Convert.ToBase64String(item.File));
            }
        </script>

这是嵌入标签：

<embed id="pdfFile" type="application/pdf" src="" width="100%" height="100%" />

这行不通！ embed标签在按下按钮后会打开，但是mebed里面没有pdf文件。

请帮助我们如何处理这个问题

【问题讨论】：

标签： javascript html asp.net-mvc asp.net-core embed

【解决方案1】：

要正确地在浏览器上显示 PDF，您需要使用某种 PDF 查看器，例如 google docs，或者您可以使用 PDF.js 等库。

使用谷歌文档->

<iframe src=" http://docs.google.com/gview?url=http://path.com/to/your/pdf.pdf&embedded=true"  ></iframe>

为此，您需要在线托管您的 PDF。

也可以使用PDF.js http://mozilla.github.io/pdf.js/examples/ 检查示例以使其适合您。

要使嵌入解决方案正常工作，您需要在某个位置托管您的文件并在您的 src 中提供该路径。

<script type="text/javascript">
            function OpenPDF() {

                document.getElementById("pdfBack").style.visibility = "visible";
                document.getElementById("pdfDialog").style.visibility = "visible";
                document.getElementById("pdfFile").setAttribute("src", "http://yourwebsite.com/" + fileName );
            }
        </script>

<embed src="" width="500" height="375" 
 type="application/pdf">

如果托管文件有问题，我建议使用 PDF.js。

android 上的 chrome 也不支持嵌入 PDF 文件，因此如果您希望 android 用户使用 PDF.js 或 google docs。

【讨论】：