Question

我有一个API调用（azure函数）正在返回HttpResponseMessage

var result = await StorageHelper.GetFileFromStorage(filePath);
var response = new HttpResponseMessage(HttpStatusCode.OK)
{
    Content = new ByteArrayContent(result.DocumentAsByteArray)
};

response.Content.Headers.ContentType = new MediaTypeHeaderValue(result.ContentType);

return response;

我正在使用以下javascript进行消化

axios
    .get(
        `${config.apiGatewayURL}/download-file/${file}`)
    .then(response => {
        const myBlob = new Blob([response.data], { type: response.headers['content-type'] });
        const fileURL = URL.createObjectURL(myBlob);
        const a = document.createElement('a');
        document.body.appendChild(a);
        a.href = fileURL;
        a.click();
        document.body.removeChild(a);
    })
    .catch(error => {
        console.log(error);
    });

如果我在控制台中查看响应，那么我正在获取文件数据。而且，如果我使用Postman调用API，则可以下载响应，保存并打开文件而没有任何问题。

示例控制台数据：

data: "%PDF-1.5↵%�쏢↵9 0 obj↵<</Length 10 0 R/Filter /Fl...

但是...在浏览器中打开文件时，似乎文件总是损坏或某种东西，因为什么也没有显示。

有什么建议吗？？

此外...当我在记事本中查看原始文件时，第1 3行是

%PDF-1.5
%Çì¢
9 0 obj

但是当我在浏览器中查看并保存时，该文件的前3行是

%PDF-1.5
%�쏢
9 0 obj

Answer 1

通过将javascript与以下内容交换来解决。注意，我必须换掉Axios才能获取普通的旧香草。

fetch(`${config.apiGatewayURL}/download-file/${file}`)
    .then(response => {
        const blob = response.blob();
        blob.type = response.headers['content-type'];
        return blob;
    })
    .then(blob => {
        const fileURL = URL.createObjectURL(blob);
        const a = document.createElement('a');
        document.body.appendChild(a);
        a.href = fileURL;
        a.click();
        document.body.removeChild(a);
    })
    .catch(error => {
        console.log(error);
    });

链接到从API返回的文档

1 个答案: