C＃字节数组到Javascript Blob创建并自动下载PDF文件

如何解决C＃字节数组到Javascript Blob创建并自动下载PDF文件

我在C＃中具有Web api，该API返回PDF文件的字节数组。这是C＃代码

    [HttpGet]
    [Route("Download")]
    public async Task<ActionResult<byte[]>> DownloadFiles(int fileDocumentId)
    {

            var file = await _fileService.FetchFiles(fileDocumentId);
            return file.ArchiveData;
    }

这就是我使用Javascript提取调用网络api的方式。

function download(id) {
    fetch(`https://localhost:xxx/api/file/download?fileDocumentId=11`)
        .then(response => {
            debugger

            return response.json()
        })
        .then(result => {
            debugger
            console.log('Success:',result);       

            var file = new Blob([result],{ type: 'application/pdf' });
            var fileURL = URL.createObjectURL(file);
            window.open(fileURL);         
        })

        .catch(function (error) {
            console.log('Request Failed',error)
        });
}

以上内容确实创建并打开了pdf文件，但已损坏。

在console.log('Success:',result);中，控制台中的输出如下所示：

Success: JVBERi0xLjUNCiW1tbW1DQoxIDAgb2JqDQo8PC9UeXBlL0NhdGFsb2cvUGFnZXMgMiAwIFIvTGFuZyhlbi1NWSkgL1N0cnVjdFRyZWVSb290IDI3OCAwIFIvTWFya0luZm88PC9NYXJrZWQgdHJ1ZT4+Pj4NCmVuZG9iag0KMiAwIG9iag0KPDwvVHlwZS9QYWdlcy9Db3VudCAzNS9LaWRzWyAzIDAgUiAxNyAwIfigMjggMCBSIDMxIDAgUiAzOCAwIfigNDAgMCBSIDQ0IDAgUiA0NSAwIfigNDYgMCBSIDQ3IDAgUiA0OCAwIfigNDkgMCBSIDUxIDAgUiA1MiAwIfigNTMgMCBSIDU0IDAgUiA1NSAwIfigNTYgMCBSIDU3IDAgUiA1OCAwIfigNTkgMCBSIDYwIDAgUiA2MSAwIfigNjIgMCBSIDYzIDAgUiA2NCAwIfigNjUgMCBSIDY2IDAgUiA2NyAwIfigNjggMCBSIDY5IDAgUiA3MCAwIfigNzEgMCBSIDI2NiAwIfigMjczIDAgUl0gPj4NCmVuZG9iag0KMyAwIG9iag0KPDwvVHlwZS9QYWdlL1BhcmVud

由于实际输出太长，我在这里将其截断。

更多搜索之后，我还尝试了以下代码，该代码在创建blob之前将字节数组转换为arrayBuffer。它确实创建并下载了PDF，但是当我打开PDF时，该PDF也已损坏。

function downloadpdf(pdfUrl) {
    debugger
    fetch(pdfUrl).then(resp => resp.arrayBuffer()).then(resp => {
        const file = new Blob([resp],{ type: 'application/pdf' });

        const fileURL = URL.createObjectURL(file);
        const link = document.createElement('a');
        link.href = fileURL;
        link.download = "FileName" + new Date() + ".pdf";
        link.click();
    });
}

downloadpdf('https://localhost:xxx/api/file/download?fileDocumentId=11')

对于FetchFiles方法，基本上是读取PDF文件并将其转换为字节数组。

byte[] fileBytes = await File.ReadAllBytesAsync(file);

解决方法

您的代码将字节数组返回到JavaScript，而您不需要这样做，只需将其返回为FileContentResult即可，它将向响应中写入一个二进制文件，并且浏览器会将其下载为文件，即使您直接在浏览器中调用API。

[HttpGet]
[Route("Download")]
public async Task<ActionResult> DownloadFiles(int fileDocumentId)
{
    string filePath = fileDocumentId=11;

    var file = await _fileService.FetchFiles(fileDocumentId);
    string fileName = "FileName" + DateTime.Now.ToString() + ".pdf";

    return File(file.ArchiveData,"application/force-download",fileName);
}