Я хочу нажать на текст и отобразить pdf в модальном режиме

В настоящее время я показываю имя pdf-документа в тексте, и при нажатии он вызывает контроллер, а затем отображает PDF-файл на экране. Я хотел бы щелкнуть, но вместо того, чтобы открывать другой экран, файл PDF я бы хотел, чтобы модальное окно открывалось в формате PDF.

Я хотел знать, что я могу изменить в своем коде, чтобы сделать это, я оставляю ниже представление и контроллер, которые я использую.

Это мое представление, в котором я показываю имя документа на экране, и когда я нажимаю, я отправляю в качестве параметра идентификатор документа, который я хочу показать на экране.

<a href = "@Url.Action("GetPDF", "Home", new { Model.Id })">
 Document Name: @Model.documentType 
</a>

Контроллер получает идентификатор файла и вызывает через функцию получение информации о файле из базы данных, получение байта файла и преобразование его в PDF.

  public async Task<ActionResult> GetPDF(Guid id)
        {

            var vm = new ViewModels.Home.AttachmentViewModel();
            var result = vm.GetServiceAttachment(id));

            //Function to get the file information from DB .

            
            byte[] file;
            foreach (var attachment in result)
            {
              
                  file = attachment.File;

                  byte[] byteArray = file;


               return new FileContentResult(byteArray, "application/pdf");
            }
            return null;
    }

Эта ссылка - то, что мне нужно, как я могу получить код, чтобы увидеть, как он работает. Большое спасибо!

Michaelweston 18.04.2023 14:20
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
1
1
62
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Отказ от ответственности Я не являюсь автором (Мудассар Хан), который является предметом этой демо-версии для загрузки https://www.aspsnippets.com/demos/1261/ , но, похоже, это то, что вам нужно. Его можно настроить в соответствии с вашими требованиями и т. д. Источник находится по адресу https://www.aspsnippets.com/Handlers/DownloadFile.ashx?File=96826afb-6258-4d2a-9e75-27593f30bfdb.zip

Проблема с использованием модальных окон заключается в том, что пользователь не знает текущий размер экрана. Чтобы настроить для среднего пользователя рабочего стола, я бы предложил, чтобы модальное окно было широким, но не слишком высоким, и скалярным, используя настройки 98%, связанные с окном просмотра.

$("#btnShow").click(function () {
                $("#dialog").dialog({
                    modal: true,
                    title: fileName,
                    width: 1440,
                    height: 800,
                    buttons: {
                        Close: function () {
                            $(this).dialog('close');
                        }
                    },

также изменить фиксированный размер на

                        var object = "<object data=\"{FileName}\" type=\"application/pdf\" width=\"98%vw\" height=\"98%vh\">";

Чтобы разрешить большинство пользователей на основе Chromium (Brave, Chrome, Edge и т. д.), если вы хотите, чтобы высота PDF соответствовала высоте ("#view=fitV"), измените, добавив в эту строку

object = object.replace(/{FileName}/g, "Files/" + fileName + "#view=fitV");

Спасибо большое это здорово!!! просто у меня есть последний вопрос, который я использовал, чтобы использовать контроллер для получения файла PDF, подобного этому <a href = "@Url.Action("GetPDF", "Home", new {Model.Id})"> в этом случае, как это нужно сделать, чтобы установить файл pdf с контроллера?

Michaelweston 18.04.2023 17:53

Другие вопросы по теме