如何在 angular js 中的新选项卡上显示图像或 pdf 文件？

Question

下面是我的页面：

现在，当我点击 Capture1.png 时，我想首先在新标签页上显示该图片，而不会弹出任何内容，如上图所示。

同样的方式，当我点击 sample.pdf 我想首先在新标签页上显示 pdf。

这是我的 html:

    <div ng-controller="MyController">
<a target="_blank" href="/Account/FetchFile/{{File_Id}}" ng-click="OpenFile(File_Id)" style="line-height:20px">Capture1.png</a>
<a target="_blank" href="/Account/FetchFile/{{File_Id}}" ng-click="OpenFile(File_Id)" style="line-height:20px">sample.pdf</a>
</div>

我的控制器：

var app = angular.module('MyController', ['ur.file', 'ngResource']);

app.controller('MyController', function ($scope, $resource, $http,$window) {
      var url = "http://localhost:47000/Account/FetchFile/" + fileId;
      $window.open(url, '_blank');
}

服务器端：

public FileContentResult FetchFile(int id)
        {
            byte[] fileContent = null;
            string fileType = "";
            string fileName = "";

            var file = GetFileByID(id);

            if (file != null)
            {
                fileContent = file.Data;
                fileType = file.ContentType;
                fileName = file.FileName;

                return File(fileContent, fileType, fileName);
            }

            return null;
        }

现在这里的问题是当我单击 capture1.png 然后打开两个选项卡并在我的页面上弹出（如上图所示）（选项打开和保存）和 2 个选项卡关闭，这 2 个弹出窗口出现在我的同一页面上，如我的图片所示。

有人能找出问题所在吗？？

Answer 1

您可以先创建一个 window，然后通过使用文档写入，您可以添加任何 html 、 <script> 或将任何事件绑定到 window.

使用对象标签显示内容更适合您的情况。

代码

app.controller('MyController', function($scope, $resource, $http, $window) {
  var url = "http://localhost:47000/Account/FetchFile/" + fileId;
  if(fileName.toLowerCase().indexOf('.png'))
    type = 'image/png';
  if(fileName.toLowerCase().indexOf('.pdf'))
      type = 'application/pdf';
  if(fileName.toLowerCase().indexOf('.doc'))        
      type = 'application/msword';
  var newTab = $window.open('about:blank', '_blank');
  newTab.document.write("<object width='400' height='400' data='" + url + "' type='"+ type +"' ></object>");
}

Type attribute 值可以根据您的文件类型进行更改，为了实现此功能，您应该在浏览器上安装 Flash 播放器。

希望对您有所帮助，谢谢。

Answer 2

这适用于图像和 pdf（在新标签页中打开）：

public FileResult GetFile(int id)
byte[] fileContent = null;
string fileType = "";
string fileName = "";

var file = GetFileByID(id);

if (file != null) {
{
fileContent = file.Data;
fileType = file.ContentType;
return File(fileContent, fileType);
}


return null;
}

查看：

<a target="_blank" href="/Account/FetchFile/{{File_Id}}" style="line-height:20px">sample.pdf</a>

如何在 angular js 中的新选项卡上显示图像或 pdf 文件？

How to display an image or pdf file on new tab in angular js?

javascript

asp.net-mvc

angularjs

angularjs-ng-click