Question

以下是我的页面：

enter image description here

现在，当我点击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个标签关闭，这两个弹出窗口出现在我的同一页面上，如我的图片所示。

有人能弄明白这个问题吗？

Answer 1

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

使用对象标签显示内容最好在您的情况下使用。

<强>代码

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>

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

2 个答案: