如何在角度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然后打开两个选项卡时,弹出窗口(如上图所示)(打开并保存选项),两个选项卡关闭,这两个弹出窗口出现在我的图片中显示的同一页面上.

任何人都可以弄明白这个问题是什么？

Answer 1

您可以先创建一个窗口,然后使用文档编写,您可以添加任何窗口html,<script>或将任何事件绑定到窗口.

使用object标签显示内容最好在您的情况下使用.

码

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属性值可以根据您的文件类型进行更改.为了实现此目的,您应该在浏览器上安装Flash播放器.

希望这可以帮助你,谢谢.