Hi mahesh213,
Problem is with the App_Data folder.
The App_Data folder is used as a data storage for the web application.
It can store files such as .mdf, .mdb, and XML. It manages all of your application's data centrally.
It is accessible from anywhere in your web application.
So any file you place App_Data folder there won't be downloadable.
So instead of saving the files inside the App_Data, create another folder inside the project folder and move the files to there and update your database record with the folder name.
Check this example. Now please take its reference and correct your code.
Here in this example i have used folder name Files to store the files.
HTML
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.8/angular.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/angular-utils-pagination@0.11.1/dirPagination.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-animate.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular-touch/1.6.1/angular-touch.min.js"></script>
<script type="text/javascript" src="https://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.5.0.js"></script>
<script type="text/javascript">
var app = angular.module("MyApp", []);
app.controller("MyController", ['$scope', '$http', function ($scope, $http) {
$scope.terms = [{ Id: 1, Resume: "F:/Web/File_Preview_AngularJS/Files/Test.jpg", Name: "aaaa" },
{ Id: 2, Resume: "F:/Web/File_Preview_AngularJS/Files/Test.pdf", Name: "bbbb" },
{ Id: 3, Resume: "F:/Web/File_Preview_AngularJS/Files/Test.xlsx", Name: "cccc" },
{ Id: 4, Resume: "F:/Web/File_Preview_AngularJS/Files/Test.doc", Name: "dddd"}];
} ]);
</script>
</head>
<body ng-app="MyApp" ng-controller="MyController">
<form id="form1" runat="server">
<div class="container">
<div>
<div id="dvContainer">
<div>
<div class="table-responsive ">
<table id="dvData" cellpadding="12" class="table table-bordered" style="margin-left: 20px;
margin-right: 20px;">
<tr class="success">
<th><b>Id</b></th>
<th><b>File</b></th>
<th><b>Name</b></th>
<th><b>Actions</b></th>
</tr>
<tr ng-repeat="state in terms">
<td>{{state.Id}}</td>
<td>{{state.Resume.split('/')[state.Resume.split('/').length-1]}}</td>
<td>{{state.Name }}</td>
<td><a target="_blank" href="Files/{{state.Resume.split('/')[state.Resume.split('/').length-1]}}">Link</a></td>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
</form>
</body>
</html>