Попытка просмотреть данные в формате pdf, pdf пустой

Я пытаюсь открыть файл PDF на следующей вкладке, он открывается, но всегда пустой. Я вызываю файл PDF из папки в моем Springboot. Данные отображаются в журнале консоли.

Весенний код:

 @RequestMapping(value = "/report", method = RequestMethod.GET)
    void getFile(HttpServletResponse response) throws IOException {

        String fileName = "test123.pdf";
        String path = "TrainingDocuments/SuperPartnerUser/" + fileName;

        File file = new File(path);
        FileInputStream inputStream = new FileInputStream(file);

        response.setContentType("application/pdf");
        response.setContentLength((int) file.length());
        response.setHeader("Content-Disposition", "inline;filename=\"" + fileName + "\"");

        FileCopyUtils.copy(inputStream, response.getOutputStream());

    }

Код реакции:

function download(filename, text) {
        var element = document.createElement('a');
        element.setAttribute('href', 'data:application/pdf;charset=utf-8,' + encodeURIComponent(text));
         element.setAttribute('target','_blank');
       
        element.style.display = 'none';
        document.body.appendChild(element);
       
        element.click();
       
        document.body.removeChild(element);
        }

    function test () {
        Api(`tempFileDownload/report`, 'Get',"",3).then((data) => {
            console.info(data);
            download("test",data)
            const file = new Blob([ data ], { type: 'application/pdf' });

            //Build a URL from the file
            const fileURL = URL.createObjectURL(file);
            //Open the URL on new Window
            window.open(fileURL);
        });
}

PDF-данныеПустой PDF

данные, которые вы получаете от API base64?

Mujeeb Qureshi 23.03.2022 22:49

@MujeebQureshi не верит, что это так?

Chris Potgieter 23.03.2022 23:10

да, потому что вы отправляете двоичные данные со своего сервера, которые вы, кажется, размещаете внутри объекта Blob на своем внешнем интерфейсе. Вы пробовали вести консольный журнал fileURL сразу после const fileURL = URL.createObjectURL(file);

Mujeeb Qureshi 23.03.2022 23:18

@MujeebQureshi, когда я регистрирую в консоли URL-адрес файла, я получаю размер и тип BLOB-объекта

Chris Potgieter 23.03.2022 23:28

@MujeebQureshi это правильно?

Chris Potgieter 23.03.2022 23:28

Я считаю, что проблема в том, что это должна быть строка URL вместо объекта.

Mujeeb Qureshi 23.03.2022 23:35

@MujeebQureshi, можете ли вы порекомендовать решение проблемы, для меня все выглядит хорошо>

Chris Potgieter 23.03.2022 23:36

Возможно ли вернуть строку base64 отчета в формате pdf вместо двоичного? Все станет очень легко, если вы справитесь с этим. Если ваш сервер написан на dotNet, есть простая утилита, которая может это сделать.

Mujeeb Qureshi 23.03.2022 23:40
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Массив зависимостей в React
Массив зависимостей в React
Все о массиве Dependency и его связи с useEffect.
0
8
35
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

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

Проблема заключалась в вызове API для внешнего интерфейса, бэкэнд работает нормально; Тип ответа должен быть большим двоичным объектом.

const result = await axios({
            url: `${localUrl + url}`, //your url
            method: 'GET',
            responseType: 'blob', // important
        })
        .then(({ data }) => data);
    return result;

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