javascript 如何在angular js的新选项卡上显示图像或pdf文件？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/29071107/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to display an image or pdf file on new tab in angular js?
提问by CodeScanner
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.
现在，当我单击 Capture1.png 时，我想首先在新选项卡上显示该图像，而不会弹出任何弹出窗口，如上图所示。
Same way when i click on sample.pdf i want to first display pdf on new tab.
同样的方式，当我点击 sample.pdf 我想首先在新标签上显示 pdf。
This is my html:
这是我的 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.
现在这里的问题是，当我单击 capture1.png 时，我的页面上的两个选项卡打开并弹出（如上图所示）（带有打开和保存选项），2 个选项卡关闭，这两个弹出窗口出现在我的图片中显示的同一页面上。
Can anybody figure out whats the problem??
有人能弄清楚是什么问题吗？？
采纳答案by CodeScanner
This worked for both image and pdf(opening in new tab):
这对图像和 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;
}
View:
看法：
<a target="_blank" href="/Account/FetchFile/{{File_Id}}" style="line-height:20px">sample.pdf</a>
回答by Pankaj Parkar
You can create a window first then by using document write you can add any html, <script>or bind any event to window.
您可以先创建一个窗口，然后通过使用文档写入，您可以添加任何事件html，<script>或将任何事件绑定到窗口。
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>");
}
Typeattributevalue could be change as per your file type, In order to work this you should have flash player installed on your browser.
Type属性值可以根据您的文件类型进行更改，为了实现这一点，您应该在浏览器上安装 Flash 播放器。
Hope this could help you, Thanks.
希望能帮到你，谢谢。
