Как скачать файл с помощью react js и asp.net core v3.0

Я получаю строку base64 pdf из веб-службы, затем конвертирую base64 в Byte[], затем возвращаю файл в контроллер, но файл не загружается

Я использую реакцию как передний вызов контроллера с помощью fetch API

fetch('/api/PDFDownload/PDFDownloadStat', {
        method: 'POST',
        headers: {
            'content-type': 'application/json',
            'X-CSRF-TOKEN': getCookies("CSRF-TOKEN")
        },
        body: JSON.stringify(data)
    }).then(res => res.json())
       
        }).catch(error =>
        {
            console.info(error)
        });

public class PDFDownloadController : Controller{    

[HttpPost("[action]")]
        public async Task<IActionResult> PDFDownloadStatController(PDFEntity pdfObj)
        {

            var response = string.Empty;
            Byte[] Base64=null;
            try
            {

                if (ModelState.IsValid)
                {                  
                    Base64 = genPDF.GetPDFByte();  // getting Byte for pdf

                }              
            }
            catch (Exception ex)
            {

            }
            return File(Base64, "application/pdf", "myFile.pdf");
        }
}

Прямо сейчас вы анализируете ответ на свой запрос как json, который (очевидно) не будет работать для файла. Посмотрите на fetch's response.blob(): developer.mozilla.org/en-US/docs/Web/API/Body/blob - возможно, в сочетании с библиотекой, такой как downloadjs, чтобы преобразовать этот блоб в (загруженный) файл: npmjs.com/package/downloadjs

— 11.07.2019 13:29

Или обратитесь к ответу, опубликованному здесь stackoverflow.com/a/32545850/3061857, чтобы узнать, как вы используете response.blob() с downloadjs.

— 11.07.2019 13:31

javascript c# reactjs asp.net-core asp.net-core-mvc

11.07.2019 13:22

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

4 777

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

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

Поскольку вы загружаете файл, вам нужно будет добавить ответ blob в свой код.

fetch('/api/PDFDownload/PDFDownloadStat', {
        method: 'POST',
        headers: {
            'content-type': 'application/json',
            'X-CSRF-TOKEN': getCookies("CSRF-TOKEN")
        },
        body: JSON.stringify(data)
    }).then(res => return response.blob())
        }).catch(error =>
        {
            console.info(error)
        });

В примере документов Mozilla:

var myHeaders = new Headers();

var myInit = { method: 'GET',
               headers: myHeaders,
               mode: 'cors',
               cache: 'default' };

var myRequest = new Request('flowers.jpg', myInit);

    fetch(myRequest).then(function(response) {
      return response.blob();
    }).then(function(myBlob) {
      var objectURL = URL.createObjectURL(myBlob);
      myImage.src = objectURL;
    });

Вы можете прочитать полный код здесь

11.07.2019 16:26