Javascript 在AngularJS中从.NET控制器下载PDF

好的，我已经阅读了关于从web服务下载PDF的所有堆栈溢出问题。到目前为止，他们都没有帮助过我。我用这个作为最后的努力，试图得到一些答案。基本上，我正在向API发出GET请求，并且需要获取动态生成的PDF。我们已经尝试通过接收一个

字节[]

来实现这一点，现在我们返回一个包含内容的流。以下是我们在web服务控制器中拥有的内容：

var result = await resp.Content.ReadAsAsync<byte[]>();
var response = request.CreateResponse(HttpStatusCode.OK);
var dataStream = new MemoryStream(result);
response.Content = new StreamContent(dataStream);
response.Content.Headers.ContentType = new MediaTypeHeaderValue("application/octet-stream");
response.Content.Headers.ContentDisposition = new ContentDispositionHeaderValue("attachment");
response.Content.Headers.ContentDisposition.FileName = "idcard.pdf";

var fileStream = new FileStream(@"c:\temp\temp.pdf", FileMode.Create);
fileStream.Write(result, 0, result.Length);
fileStream.Close();

return response;

$scope.printIdCard = function() {
memberIdCard.get().then(function(data) {
    var pdf = data.data;
    FileSaver.saveAs(pdf, 'idcard.pdf');

    var pdfUrl = window.URL.createObjectURL(pdf);

    $scope.pdfView = $sce.trustAsResourceUrl(pdfUrl);
    window.open($scope.pdfView);

});

我用

$http

和

$resource

试过这部分，但都不起作用。现在，在我的控制器中：

var result = await resp.Content.ReadAsAsync<byte[]>();
var response = request.CreateResponse(HttpStatusCode.OK);
var dataStream = new MemoryStream(result);
response.Content = new StreamContent(dataStream);
response.Content.Headers.ContentType = new MediaTypeHeaderValue("application/octet-stream");
response.Content.Headers.ContentDisposition = new ContentDispositionHeaderValue("attachment");
response.Content.Headers.ContentDisposition.FileName = "idcard.pdf";

var fileStream = new FileStream(@"c:\temp\temp.pdf", FileMode.Create);
fileStream.Write(result, 0, result.Length);
fileStream.Close();

return response;

$scope.printIdCard = function() {
memberIdCard.get().then(function(data) {
    var pdf = data.data;
    FileSaver.saveAs(pdf, 'idcard.pdf');

    var pdfUrl = window.URL.createObjectURL(pdf);

    $scope.pdfView = $sce.trustAsResourceUrl(pdfUrl);
    window.open($scope.pdfView);

});

请注意，

FileSaver

来自

在所有这些之后，新窗口将打开，但出现一个错误，显示为：加载PDF文档失败，如果您尝试在Adobe Acrobat中打开它，则会出现一个错误，显示为：Adobe Acrobat Reader DC无法打开“idcard.PDF”，因为它不是受支持的文件类型或文件已损坏（例如，它作为电子邮件附件发送，未正确解码）

任何帮助都将不胜感激。我觉得我已经完成了许多其他SO问题中建议的所有内容，但也许我遗漏了一些我无法看到的东西

---

谢谢！

我对.xlsx文件做了类似的操作，但概念是一样的。希望这能帮助你，这对我很有用

我从另一个SO答案下载了javascript代码，我无法链接，因为我不记得它在哪里

我的web api控制器如下所示：

.factory('memberIdCard', ['$http', function($http) {

var get = function() {
    return $http({
        method: 'GET',
        url: '/Member/IdCard',
        headers: {
            accept: 'application/octet-stream'
        },
        responseType: 'arraybuffer',
        transformResponse: function(data) {
            var pdf;
            console.log('data: ', data);
            if (data) {
                pdf = new Blob([data], {
                    type: 'application/pdf'
                });
                console.log('pdf: ', pdf);
            }
            return pdf;
        }
    })
}

return {
    get: get
}
}]);

[Route("all")]
[HttpGet]
public HttpResponseMessage GetAll(HttpRequestMessage request)
{

HttpResponseMessage response = null;

MemoryStream stream = _exportService.CreateDataStream();

response = request.CreateResponse(HttpStatusCode.OK);

response.Content = new ByteArrayContent(stream.GetBuffer());
response.Content.Headers.ContentDisposition = new System.Net.Http.Headers.ContentDispositionHeaderValue("attachment");
response.Content.Headers.Add("content-type", "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet");

return response;


}

以及角度服务：

（功能（应用程序）{
"严格使用",；
应用程序工厂（“出口服务”，出口服务）；
exportService.$inject=['$q'，'$http']；
函数exportService（$q，$http）{
变量扩展='.xlsx'；
var服务={
导出：导出数据
};
函数exportData（事件，fname）{
变量配置={
响应类型：“arraybuffer”
}
变量路径='api/export/'+事件；
var deferred=$q.deferred（）；
返回$http.get（路径，配置）(
功能（响应）{
var数据=响应数据；
var status=response.status；
var headers=response.headers（）；
var octetstreamime='application/octetstream'；
var成功=false；
var filename=fname+扩展名；
var contentType=headers['content-type']| | octetStreamMime；
尝试
{
//如果支持，请尝试使用msSaveBlob
var blob=新blob（[data]，{type:contentType}）；
if（navigator.msSaveBlob）
msSaveBlob（blob，文件名）；
否则{
//如果可用，请尝试使用其他saveBlob实现
var saveBlob=navigator.webkitSaveBlob | | navigator.mozSaveBlob | | navigator.saveBlob；
如果（saveBlob==未定义）抛出“不受支持”；
saveBlob（blob，文件名）；
}
成功=真实；
延迟。解决（）；
}捕获（ex）
{
}
如果（！成功）
{
//获取blob url创建者
var urlCreator=window.URL | | | window.webkitURL | | | window.mozURL | | window.msURL；
如果（urlCreator）
{
//尝试使用下载链接
var link=document.createElement（'a'）；
if（链接中的“下载”）
{
//尝试模拟一次点击
尝试
{
//准备一个blob URL
var blob=新blob（[data]，{type:contentType}）；
var url=urlCreator.createObjectURL（blob）；
link.setAttribute（'href'，url）；
//设置下载属性（Chrome 14+/Firefox 20+支持）
link.setAttribute（“下载”，文件名）；
//模拟单击下载链接
var event=document.createEvent（'MouseEvents'）；
initMouseEvent（'click'，true，true，window，1，0，0，0，false，false，false，false，false，0，null）；
link.dispatchEvent（事件）；
成功=真实；
延迟。解决（）；
}捕获（ex）{
}
}
如果（！成功）
{
//回退到window.location方法
尝试
{
var blob=new blob（[data]，{type:octetstreamime}）；
var url=urlCreator.createObjectURL（blob）；
window.location=url；
成功=真实；
延迟。解决（）；
}捕获（ex）{
拒绝（）；
}
}
}
}
回报。承诺；
},
函数（错误）{
返回$q.reject（错误）；
});
}
回程服务；
}
})（angular.module（'core.module'）；

感谢您的回复和帮助。我实现了所有这些，但结果仍然没有帮到我。我认为它基本上做了angular文件保护程序所做的事情，只是以不同的方式。一定有什么