首页 > 解决方案 > 如何使用 Angular js 5 在新选项卡中查看文件?

问题描述

我正在尝试在新选项卡的浏览器中查看文件,但在服务中我没有得到任何响应,它把我扔到我的服务的 catch 处理程序中,在处理程序中我没有得到任何特定的错误来解决问题。

我在标头中发送授权令牌,因为我的视图文档 api 受到保护。

还有以下两个电话正在进行,我不明白为什么:

呼叫1

呼叫2

代码 :

控制器:

viewFile(index) {
    this.FileService.view("f819f948-b5dd-4478-ad69-b0e610627375").subscribe((response) => {
      if (response.message === "success") {
        window.open(this.baseUrl + response.id, '_blank');
      }
     }),
      (error) => {
        console.log('error');
    }
  }

文件服务.ts

view(id): Observable<any> {
    return this._http.get<any>(this.baseUrl + 'example/document/' + id)
    .catch(this.handleError);
  }

  handleError(error: HttpErrorResponse) { //always throwing here
    if (error.error instanceof ErrorEvent) {
      console.error('An error occurred:', error.error.message);
    } else {
      console.error(
        `Backend returned code ${error.status}, ` +
        `body was: ${error.error}`);
      console.log(error);
    }
    return new ErrorObservable(
      'Something bad happened; please try again later.');
  };

Webapi核心:支持方法

 IServiceContext _ctx;
 Stream stream = repo.GetFileStream("abc.pdf", filePath);
                if (stream.CanSeek)
                {
                    stream.Seek(0, SeekOrigin.Begin);
                }
                _ctx.req.HttpContext.Response.Headers.Add("Content-Disposition", "inline; filename=" + "abc.pdf");
                var provider = new FileExtensionContentTypeProvider().
                TryGetContentType("abc.pdf", out string contentType);
                _ctx.req.HttpContext.Response.ContentType = contentType;
                stream.CopyTo(_ctx.reqobj.HttpContext.Response.Body);
                stream.Flush();

我在这里没有得到什么问题,最重要的是为什么有 2 个获取电话?

当我在邮递员中调用我的视图 api 文档 api 时,我可以看到该文件,并且当我在 chrome 中预览开发人员工具时,我可以看到图像,但它不适用于 angular js。

我是否缺少服务器端的任何内容或客户端有问题?

我将不胜感激任何帮助:)

标签: javascriptc#angular5asp.net-core-webapi

解决方案


推荐阅读