Скачивание ответа ByteArray (application / pdf или application / octect-stream) с помощью activ js - PullRequest
Новая
       18

Скачивание ответа ByteArray (application / pdf или application / octect-stream) с помощью activ js

0 голосов
/ 02 апреля 2020

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

% PDF-1,4% ���� 2 0 obj <> stream x����n�0�� ~ ����M����ay�I��P��ɲk���K ٰ b�d� "? �����v�N��p������N�o: �� O��ӏ��z: ��D & ���� # ���� "� [�Gпr�� r� [��ƽ�EM ���ać�����E�Pw�� 3Dn1� ض��� "qr����2�B �Rz���E�ɕl�b6�? H`��T � �DS��; �Zh� & �ƅ�Js * i�� �H��fX�ʪ��6� (��x = w߻�� endobj endobj 4 0 obj <>>> / Содержание 2 0 R / Parent 3 0 R >> endobj 1 0 obj <> endobj 3 0 obj <> endobj 5 0 obj <> endobj 6 0 obj <> endobj xref 0 7 0000000000 65535 f 0000000590 00000 n 0000000015 00000 n 0000000676 00000 n 0000000478 00000 n 0000000727 00000 n 0000000772 00000 n трейлер << 2324328368ff9e8a> 0505 -5.5.13.1 startxref 1020 %% EOF

, но никогда не загружается. Поэтому я основатель d эти решения, для которых требуется тип ответа = 'blob' { ссылка } - это решение загружает мне только пустой PDF. { ссылка } - также загружает пустой PDF

enter image description here

Однако, если я попробую почтальон, как было сказано ранее, загруженный файл PDF не будет пустым.

Пожалуйста, помогите мне с обходным решением для это. Любая помощь оценивается.

Код переднего плана; Из класса обслуживания - здесь я использовал файл-заставку. но я попробовал другие варианты здесь таким же образом. 

const downloadarticle=createLogic({
    type:downloadArticleTypes.DOWNLOAD_ARTICLE,
    latest:true,
    debounce:1000,

    process({
        action
    },dispatch,done){
        let HTTPclient=api

        // debugger
        console.log("payload check",action.payload)

        let obj={
            generatedText:action.payload.generated_text,
        }

        HTTPclient.postPDF(endPoints.DOWNLOAD_ARTICLE+"/"+action.payload.article_id,obj)
            .then(resp=> {
                // debugger
                console.log(resp.data)

                var blob = new Blob([resp.data], {type: "application/pdf"});
                saveAs(blob, resp.data.filename)

            })
            .catch(err=>{
                var errormsg="Failed to download Article";
                if (err && err.code === "ECONNABORTED") {
                    errormsg = "Please check your internet connection.";
                }
                dispatch(downloadArticleActions.DdownloadArticleFail(errormsg))
            }).then(()=>done());
    }
})

Код класса HttpClient для записи 

export const postPDF=(route,imgdata,responseType='blob')=>{
    instance || setAuth()
    return instance.post(route,imgdata,responseType)
    // dtodata == null ? { dtodata: {} } : dtodata= JSON.stringify(dtodata),
}

на компоненте, я вызываю действие, на кнопке Скачать нажмите как следует за 

 onDownloadClick=()=>{
        let obj={
            article_id:0,
            generated_text:this.state.item.caption
        }

        this.props.downloadArticleActions.downloadArticle(obj)
    }

реализацией Backend API; Контроллер 

@RequestMapping(value = "/download/{id}", method = RequestMethod.POST, consumes = MediaType.APPLICATION_JSON_VALUE, produces = MediaType.APPLICATION_PDF_VALUE)
    public ResponseEntity<?> downloadArticle(@RequestHeader(value = "Authorization") String token, @PathVariable("id") long id,@RequestBody MaskedLMDTO dto) throws DocumentException {

        Article article=articleService.downloadPDF(id,dto);

        HttpHeaders headers = new HttpHeaders();
        headers.setContentType(MediaType.parseMediaType("application/pdf"));
        headers.add("content-disposition", "attachment;filename=" + article.getDateTime() + ".pdf");
        headers.setContentDispositionFormData( article.getDateTime()+ ".pdf", article.getDateTime() + ".pdf");

        ResponseEntity<byte[]> response = new ResponseEntity<byte[]>(article.getArticleFile(), headers, HttpStatus.OK);
        return response;
    }

1 Ответ

0 голосов
/ 03 апреля 2020

Можете ли вы попробовать позвонить на ваш сервер, используя метод fetch, и загрузить PDF, используя downloadjs, доступный здесь: https://www.npmjs.com/package/downloadjs?

Я думаю, ваш код будет выглядеть примерно так: 

fetch(endPoints.DOWNLOAD_ARTICLE+"/"+action.payload.article_id, {
  method: 'POST',
  body: obj,
  headers: {
    'Content-Type': 'application/json'
  },
}).then(function(resp) {
  filename = resp.data.filename;
  return resp.blob();
}).then(function(blob) {
  return download(blob, filename);
});
...