Блог

Главная - Вопросы по программированию - Отображение pdf-файла, загруженного из базы данных, в теге для встраивания

Отображение pdf-файла, загруженного из базы данных, в теге для встраивания

#javascript #html #asp.net-mvc #asp.net-core #embed

#javascript #HTML #asp.net-mvc #asp.net-ядро #Внедрить

Вопрос:

Мы пытаемся извлечь PDF-файлы из базы данных в формате массива байтов. когда пользователь нажимает на кнопку display, он должен отображаться в теге embed, который появляется в верхней части экрана. Но когда мы преобразуем массив байтов в base64string, он не появляется в файле embed.

 <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:

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

Это не работает! тег embed откроется после нажатия кнопки, но внутри mebed нет файла pdf.

Это наша страница

Файл встраивания появляется без файла pdf

Пожалуйста, помогите нам, как нам справиться с этой проблемой

Ответ №1:

Чтобы правильно отобразить PDF файл непосредственно в браузере, вам необходимо использовать какой-либо просмотрщик PDF, например Google docs, или вы можете использовать такие библиотеки, как PDF.js .

  1. Использование Google doc ->
 <iframe src=" http://docs.google.com/gview?url=http://path.com/to/your/pdf.pdfamp;embedded=true"  ></iframe>

Чтобы это сработало, вам нужно разместить свои PDF-файлы где-нибудь в Интернете.

  1. Вы также можете использовать 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 если размещение файла является проблемой.

Кроме того, Chrome на Android не поддерживает встраивания с файлами PDF, поэтому, если вы ожидаете, что пользователи Android используют PDF.js или google docs.

Метки: