Question

我正在使用springboot后端api下载带有react前端的pdf文件。当后端api在邮递员上进行测试时，它要求下载响应，并下载预期的pdf。当我将API与react集成在一起时，它会在响应中显示以下内容，

％PDF-1.4 ％�� 2 0对象 <>流 x��n�0��〜 …Ò��I��P��ɲk��Kٰb�d。“？��v�N��p��N�o：��O ��ӏ��z：��D ＆��＃��“。[[Gпr�� r�[��ƽEMEMać��E�Pw��3Dn1�ض��''qr��2�B�Rz�E�lb6�H ��T搵DSDS;Zh�Js*i�H��fX�ʪ��6�（��x= w߻�� 尾流 endobj 4 0对象 <>>> /目录2 0 R /父项3 0 R >> endobj 1 0个对象 <> endobj 3 0对象 <> endobj 5 0目标 <> endobj 6 0目标 <> endobj 外部参照 0 7 0000000000 65535 f 0000000590 00000 n 0000000015 00000 n 0000000676 00000 n 0000000478 00000 n 0000000727 00000 n 0000000772 00000 n 预告片 << 2324328368ff9e8a10923bbe7a3d048d>] >> ％iText-5.5.13.1 startxref 1020 %% EOF

，但从未下载。所以我找到了这些解决方案，它们要求响应类型为“ blob” https://stackoverflow.com/a/47079123/10598769-此解决方案仅下载空白pdf文件。 https://stackoverflow.com/a/41940307/10598769-也下载空白pdf

但是，如果我如前所述尝试使用邮递员，则下载的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)
    }

后端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;
    }

Answer 1

您可以尝试使用获取方法调用服务器并使用https://www.npmjs.com/package/downloadjs上的downloadjs下载PDF吗？

我想您的代码将如下所示：

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);
});

使用React JS下载ByteArray（application / pdf或application / octect-stream）响应

1 个答案: