Javascript 提示文件下载

我在我的页面上有一个链接，我正在尝试生成一个PDF文档，然后在浏览器上显示“打开-保存”提示

我的HTML（reactjs组件）有下面的代码，其中

onclick

调用

\getMyDocument

函数，该函数随后调用Webapi方法

 <div className="row">
     <a href="#" onClick={this._getMyDocument.bind(this)}>Test Link</a>
 </div>  

_getMyDocument(e) {
            GetMyDocument(this.props.mydata).then(()=> {
   }).catch(error=> {

  });

目前所有的代码都执行了，但我没有得到PDF文件下载提示。我做错了什么

从ajax调用lokks成功响应对象，如下所示

---

您的问题是GetMyDocument函数将接收PDF文件作为服务器响应，而当前您对该响应不做任何处理。您需要在then回调中处理响应。从javascript保存文件并不完全简单，因此我建议使用外部库（如）来帮助您

它最终会看起来像

_getMyDocument(e) {
    GetMyDocument(this.props.mydata)
    .then((response)=> {
        const returnedFile = new Blob([response], { type: 'application/pdf'});
        saveAs(returnedFile);
    }).catch(error=> {

    });

在我们的应用程序（angular）中，我们必须为其创建一个对象url，代码如下：

WebApi：

result = Request.CreateResponse(HttpStatusCode.OK);
result.Content = new ByteArrayContent(data);
result.Content.Headers.Add("Content-Type", "application/pdf");
result.Content.Headers.ContentDisposition =
                        new System.Net.Http.Headers.ContentDispositionHeaderValue("attachment")
                        {
                            FileName = "FileNameHere"
                        };

return result;

javascript:

// HttpCall in here
// On SuccessResponse
    var file = new Blob([data], {
                    type: 'application/pdf'
                    });
    var fileURL = URL.createObjectURL(file);
// create an anchor and click on it.
    var ancorTag = document.createElement('a');
    ancorTag.href = fileURL;ancorTag.target = '_blank';
    ancorTag.download = 'CouponOrder.pdf';
    document.body.appendChild(ancorTag);
    ancorTag.click();
    document.body.removeChild(ancorTag);

---

一种简单的方法是在服务器上使用GET方法，并通过查询参数接收数据

然后，在客户端应用程序中，您只需创建一个经典链接：

<a href="http://your-server.com/your-resource?param1=123&param2=456">Test Link</a>

---

服务器的响应看起来不错。 缺少的部分是您没有以正确的方式处理来自客户端的响应

让我们假设您的资源url对象在js中如下所示。（即，您已经知道资源url，如果您还不知道，则需要单独调用服务器以了解下载url）

你需要做的就是设定

window.location = item.downloadUrl;

这将导致浏览器从服务器请求资源，服务器的响应必须包含

内容处置：附件。这将导致浏览器显示“下载”对话框

另外，我最近也开发了类似的功能。如果你有问题，请提问

当您想强制浏览器显示某些文件（或资源）的下载提示时，必须包括
内容处置：附件（您已经这样做了）。
创建内容处置并将其添加到响应头中

var cd = new System.Net.Mime.ContentDisposition
{
    // for example foo.bak
    FileName = System.IO.Path.GetFileName(fileName),
    // always prompt the user for downloading, set to true if you want 
    // the browser to try to show the file inline
    Inline = false,
};
Response.AppendHeader("Content-Disposition", cd.ToString());

尝试使用Filesaver.js如何从响应中读取数据？。new File（）需要两个参数，并且需要数据是数组。进一步研究一下，我认为我们需要使用blob而不是File-我已经编辑了.var File=new blob（[response]，{type:'application/pdf'}）；FileSaver.saveAs（文件）；这将生成空白文档。这需要在传递到Blob之前进行任何转换吗？如果您使用新的Blob（[response.data]），它还会下载。但在打开文件时，它给出的不是空白页，而是无效的pdf数据错误。您尝试过我的解决方案了吗。请给出您的反馈。我尝试在@Ermir Beqiraj的回答之后分配下载URL。var file=newblob（[response]，{type:'application/pdf'}）；var fileURL=URL.createObjectURL（文件）；window.location=fileURL；这是下载的PDF文件，但无效。什么是MyBusinessObject.GenerateMyReport（myData）正在做什么？。。它是否向另一个应用程序发出请求？它调用另一个库（内部），该库使用Microsoft Report viewer生成报告数据（btye数组）。我正在使用Microsoft Report viewer生成pdf。没有实际文件可用于设置下载url。我已将问题更新为包含响应对象。@San，下载url指的是将返回pdf作为响应的任何web服务地址（服务器请求）。因此，如果调用Microsoft report viewer返回pdf，则需要将相同的调用请求分配给变量
window.location
I已通过执行->var file=new Blob（[response]，{type:'application/pdf'）分配URL；var fileURL=URL.createObjectURL（文件）这将下载文件。但在尝试打开时显示为已损坏的文件。@San，在记事本中打开生成的文件，查看您获取的内容是否不是pdf文档。。也就是说，调用MyBusinessObject.GenerateMyReport时出现500个错误或异常消息没有异常。我已经验证了MyBusinessObject.GenerateMyReport返回的数据的大小，并将其直接写入pdf文件。
response.downloadUrl = app/media/fileId/document.pdf

window.location = item.downloadUrl;

var cd = new System.Net.Mime.ContentDisposition
{
    // for example foo.bak
    FileName = System.IO.Path.GetFileName(fileName),
    // always prompt the user for downloading, set to true if you want 
    // the browser to try to show the file inline
    Inline = false,
};
Response.AppendHeader("Content-Disposition", cd.ToString());