reactjs 提示文件下载

lx0bsm1f  于 2023-03-01  发布在  React
关注(0)|答案(5)|浏览(110)

我的页面上有一个链接,单击该链接后,我试图生成PDF文档,然后在浏览器上显示“打开-保存”提示。
我的HTML(reactjs组件)包含以下代码,其中onclick调用_getMyDocument函数,然后_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的响应对象,如下所示

6kkfgxo0

6kkfgxo01#

您从服务器得到的响应看起来不错。缺少的部分是您没有以正确的方式处理来自客户端的响应。
让我们假设你的资源url对象看起来像下面的js.(即你已经知道资源url,如果你还不知道,那么你将需要一个单独的调用服务器知道下载url)

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

你要做的就是,

window.location = item.downloadUrl;

这将导致浏览器向服务器请求资源,服务器的响应必须包括Content-Disposition:attachment;。这将导致浏览器显示下载对话框。
我最近做了一个类似的功能。如果你有问题请问。
当您希望强制浏览器显示某些文件(或资源)的下载提示时,必须在响应头中包含Content-Disposition:attachment;(您已经这样做了)。

4urapxun

4urapxun2#

一个简单的方法是在服务器上使用GET方法,通过查询参数接收数据。
然后,在客户端应用中,您只需创建一个经典链接:

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

或者,如果您希望从脚本逻辑管理它,则使用简单JS脚本:

window.open("http://your-server.com/your-resource?param1=123&param2=456");
jw5wzhpr

jw5wzhpr3#

在我们的应用程序(angular)中,我们必须使用如下代码创建一个对象URL:
网络API:

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;

浏览器:

// 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 anchorTag = document.createElement('a');
    anchorTag.href = fileURL;
    anchorTag.target = '_blank';
    anchorTag.download = 'CouponOrder.pdf';
    document.body.appendChild(anchorTag);
    anchorTag.click();
    document.body.removeChild(anchorTag);
hk8txs48

hk8txs484#

创建内容处置并将其添加到回复标头中

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());
2sbarzqh

2sbarzqh5#

您的问题是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=> {

    });

相关问题