Angularjs在新的弹出窗口中显示pdf /图像文件

时间:2016-05-05 10:24:35

标签: javascript angularjs asp.net-web-api

我正在尝试在新的弹出窗口中显示图像和pdf文件。文档以字节数组的形式保存在数据库中。这是我的服务器端代码。

 public HttpResponseMessage GetUserDocumentByDocumentId(int documentId)
    {
        HttpResponseMessage result = null;
        try
        {

            RegistrationManager registrationManager = new RegistrationManager();
            var file = registrationManager.GetUserDocumentByDocumentId(documentId);
            result = Request.CreateResponse(HttpStatusCode.OK);
            result.Content = result.Content = new ByteArrayContent(file.DocumentObject);
            result.Content.Headers.ContentDisposition = new System.Net.Http.Headers.ContentDispositionHeaderValue("attachment");
            result.Content.Headers.ContentType = new MediaTypeHeaderValue(file.DocumentExtension);
            result.Content.Headers.ContentDisposition.FileName = file.DocumentName;
            result.Content.Headers.Add("x-filename", file.DocumentName);
            return result;
        }
        catch (Exception ex)
        {
            throw new HttpResponseException(FBSHttpResponseException.HttpResponseMessage(ex));
        }
    }

客户端代码就像那样

 var windowWidth = 1000;
 var windowHeight = 550;
 var left = (screen.width / 2) - (windowWidth / 2);
 var top = ((screen.height / 2) - (windowHeight / 2)) - 50;
 if (typeof reportWindow != 'undefined' && reportWindow.closed == false) {
 reportWindow.close();
 }
 var url = baseUrl + "/api/user/getuserdocumentbydocumentid/" + userDocId;
 $window.open(url, 'PopupReport', 'scrollbars=yes,status=yes,toolbar=yes,menubar=no,location=no,resizable=no,fullscreen=yes, width=' + windowWidth + ', height=' + windowHeight + ', top=' + top + ', left=' + left);

但不是在新窗口中显示它们,而是打开窗口并下载pdf或图像文件。

2 个答案:

答案 0 :(得分:1)

您应该将Content-Disposition标头设置为" inline"在后端,以便浏览器尝试呈现文件而不是下载它:

result.Content.Headers.ContentDisposition = new System.Net.Http.Headers.ContentDispositionHeaderValue("inline");

请参阅此问题Content-Disposition:What are the differences between "inline" and "attachment"?

答案 1 :(得分:0)

我建议您使用像jsPDF这样的库。

请在此处查看jsPDF