无法将文件从Controller Action发送到浏览器进行下载

时间:2019-05-19 13:26:12

标签: javascript .net-core download xmlhttprequest

我正在将XMLHttpRequest发送到MVC Controller,因此我希望收到一个文件。 使用浏览器进行调试时,我得到了response没问题,但是我不知道为什么它不是文件:

JS

 window.submit=function () {
                return new Promise((resolve, reject) => {
                    var form = document.getElementById("newTestForm");
                    var data = new FormData(form);
                    var xhr = new XMLHttpRequest();


                    var method = form.getAttribute('method');
                    var action = form.getAttribute('action');
                    xhr.open(method, action);
                    xhr.onload = function () {
                        if (this.status >= 200 && this.status < 300) {
                            resolve(xhr.response); //response looks ok...but no file starts downloading
                        }
                        else if (xhr.status != 200) {
                            reject("Failed to submit form with status" + xhr.status);
                        }
                    }
                    xhr.send(data);
                });
            }

控制器

    [HttpPost]
    [Route([Some Route])]
    public  async Task  BenchAsync(object request)
    {
        try
        {
            string fileName = "results.txt";

            object result = await service.RunAsync(request);
            byte[] data = Encoding.UTF8.GetBytes(JsonConvert.SerializeObject(result)); 
            this.Response.ContentType = "application/octet-stream";
            this.Response.ContentLength = data.Length;

            using(MemoryStream stream=new MemoryStream(data))
            {
                await stream.CopyToAsync(this.Response.Body);
            }
        }
        catch (Exception ex)
        {
            throw;

        }
    }

1 个答案:

答案 0 :(得分:0)

感谢Post

,我已经解决了它

似乎我必须将响应转换为BLOB,创建一个下载链接,并将其指向该blob和创建的链接,以便下载文件。

所以功能看起来像:

 window.submit= function () {
        return new Promise((resolve, reject) => {
            var form = document.getElementById("newTestForm");
            var data = new FormData(form);
            var xhr = new XMLHttpRequest();


            var method = form.getAttribute('method');
            var action = form.getAttribute('action');
            xhr.open(method, action);
            xhr.onload = function () {
                if (this.status >= 200 && this.status < 300) {
                    var blob = new Blob([this.response], { type: 'image/pdf' });

                    let a = document.createElement("a");
                    a.style = "display: none";
                    document.body.appendChild(a);

                    let url = window.URL.createObjectURL(blob);
                    a.href = url;
                    a.download = 'mytext.txt';

                    a.click();

                    window.URL.revokeObjectURL(url);
                }
                else if (xhr.status != 200) {
                    reject("Failed to submit form with status" + xhr.status);
                }
            }
            xhr.send(data);
        });
    }

PS 我不知道txt的Blob类型是什么,但是只要扩展名正确,它也可以正常工作。