提示文件下载

Question

我在我的页面上有一个链接,点击其中我试图生成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=> {

  });

我的控制器具有以下代码

[HttpPost]
[Route("Generate/Report")]
public IHttpActionResult GetMyReport(MyData myData)
 {  
    byte[] myDoc = MyBusinessObject.GenerateMyReport(myData);
    var result = new HttpResponseMessage(HttpStatusCode.OK)
        {
            Content = new ByteArrayContent(myDoc)
        };
        result.Content.Headers.ContentDisposition =
            new ContentDispositionHeaderValue("attachment")
            {
                FileName = "MyDocument.pdf"
            };
        result.Content.Headers.ContentType =
            new MediaTypeHeaderValue("application/octet-stream");

        var response = ResponseMessage(result);

        return response;
  }

目前所有代码都执行但我没有得到文件PDF下载提示.我在这做错了什么？

响应对象成功来自ajax调用lokks如下

Answer 1

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

让我们假设你的资源url对象在js中如下所示.(即你已经知道了资源网址,如果你还不知道,那么你需要单独调用服务器才能知道下载网址)

response.downloadUrl = app/media/fileId/document.pdf

你需要做的就是设置,

window.location = item.downloadUrl;

这将导致浏览器从服务器请求资源,服务器的响应必须包含Content-Disposition:attachment;.它将使浏览器显示下载对话框.

PS我最近研究过类似的功能.如果您有任何疑问,请询问.

如果要强制浏览器显示某些文件(或资源)的下载提示,则必须包含 Content-Disposition:attachment;在响应标头中(您已经执行过).

Answer 2

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

它最终会看起来像......

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

    });