Angular.js在新的彈出窗口中顯示pdf /圖像文件

Question

我正在嘗試在新的彈出窗口中顯示圖像和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或圖像文件。

Answer 1

您應該在后端將Content-Disposition標頭設置為“內聯”，以便瀏覽器嘗試呈現文件而不是下載文件：

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

看到此問題內容處置：“內聯”和“附件”之間有什么區別？

Answer 2

我建議您使用jsPDF之類的庫。

在這里查看jsPDF