javascript - How to display an image or pdf file on new tab in angular js? - Stack Overflow

admin管理员组

文章数量:1289828

Below is my page:

Now when i click on Capture1.png i want to first display that image on new tab without any pop up as shown in my above picture.

Same way when i click on sample.pdf i want to first display pdf on new tab.

This is my 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>

My Controller:

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');
}

Server side:

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;
        }

Now here problem is when i single click on capture1.png then two tabs are open with the pop up(like i shown in the above image) on my page(with option open and save) and 2 tabs get closed and those 2 pop ups appear on my same page as shown in my image.

Can anybody figure out whats the problem??

Below is my page:

Now when i click on Capture1.png i want to first display that image on new tab without any pop up as shown in my above picture.

Same way when i click on sample.pdf i want to first display pdf on new tab.

This is my 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>

My Controller:

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');
}

Server side:

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;
        }

Now here problem is when i single click on capture1.png then two tabs are open with the pop up(like i shown in the above image) on my page(with option open and save) and 2 tabs get closed and those 2 pop ups appear on my same page as shown in my image.

Can anybody figure out whats the problem??

• javascript
• asp-mvc
• angularjs
• angularjs-ng-click

Share Improve this question Follow edited Mar 16, 2015 at 9:01 I Love Stackoverflow asked Mar 16, 2015 at 6:54 I Love StackoverflowI Love Stackoverflow 6,8682222 gold badges113113 silver badges238238 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

You can create a window first then by using document write you can add any html , <script> or bind any event to window.

Using object tag to show content would be better to use in your case.

Code

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 value could be change as per your file type, In order to work this you should have flash player installed on your browser.

Hope this could help you, Thanks.

This worked for both image and pdf(opening in new tab):

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;
}

View:

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

本文标签： javascriptHow to display an image or pdf file on new tab in angular jsStack Overflow