Question

我正在尝试在我的react应用上实现文件下载，该API是.net核心api。

我正在使用fileSaver js来实现前端，但是它似乎无法正确保存文件。

我的API：

        [Authorize]
        [HttpGet]
        public async Task<IActionResult> DownloadInvoice(string ID)
        {
            var invoiceContent = await this.getfile(ID); 
            //this returns a byte array of the PDF file content
            if (invoiceContent == null)
                return NotFound();
            var stream = new MemoryStream(invoiceContent); //saves it into a stream
            stream.Position = 0;
            return File(stream, "application/octec-stream", $"{invoiceNo}.pdf");
        }

我的反应代码：

    import { saveAs } from 'file-saver';
    axios
    .get(url, {
        headers: {
          'Content-Type': 'application/json',
          responseType: 'blob',
        },
      })
      .then(function(res) {
            var blob = new Blob([res.data], {
                  type: 'application/pdf',
                });

            saveAs(blob, invoice.invoiceNo + '.pdf');
        });
    }}

我用邮递员测试了API，它返回正确的数据，并且我可以正确保存文件，

邮递员的结果如下所示，这是PDF文件的正确内容：

%PDF-1.6
%����
1 0 obj
<<
/Creator(Telerik Reporting 7.1.13.612 \(http://www.telerik.com/products/reporting.aspx\))
/Producer(Telerik Reporting 7.1.13.612 \(http://www.telerik.com/products/reporting.aspx\))
/CreationDate(D:20190124112008+13'00')
>>
endobj
2 0 obj
<<
/Type/Catalog
/ViewerPreferences 3 0 R
/Pages 4 0 R
>>
endobj
3 0 obj
[bla bla bla....]

，但是当它通过blob在react中保存时，它会创建一个带有空白页的“有效” pdf文件。文件大小增加了（从43k增加到76k）。

我想知道是否有人知道此实现有什么问题，并且可以指出正确的方向。

非常感谢

Answer 1

好的，问题是这样的：

 .get(url, {
        headers: {
          'Content-Type': 'application/json',
        },
        responseType: 'blob', ////move this line out of the headers....
      })

React + .net Core API中的下载文件问题

1 个答案: