顯示在飛行模式對話框上創建的pdf

我在SO和其他站點上閱讀了很多很多像我這樣的問題，試圖解決我的問題，但是我找不到解決問題的最後一點。

說明：

我有一個表（的jqGrid）其中，I從一個數據庫顯示一些數據，如下所示：

+------+-----+ 
| Name | Age | 
+------------+ 
| test | 1 | 
+------+-----+

和我具有與信息生成PDF的按鈕當前選擇的行。

要做到這一點，當用戶點擊按鈕「PDF」我創建一個隱藏的輸入形式並將其值設置：

//create a form 
$("<form>").attr({ 
    "id" : "invform", 
    "method" : "post", 
    "action" : "Home/generatePdf" 
});

然後，我創建了輸入和隱藏它們，並提交形式服務器...

//Id of selected row 
var selectedRowId = $("#grid").jqGrid('getGridParam', 'selrow'); 
//Value of column Name of selected row 
var cellValue = $("#grid").jqGrid('getCell', selectedRowId, 'name'); 

$("#invform") 
.append($("<input>").attr({"name" : "Name", "type" : "text", "value" : cellValue})) 

//hide all inputs 
$("#invform input").attr({"hidden" : "true"}); 

//submit form 
$("#invform").submit();

的形式，然後發送到我的控制器，並填充OBJ的所有數據：

public FileStreamResult generatePdf(Model obj) 
{ 
PDF myPdf = <code for generating the pdf>; 

byte[] byteArr = myPdf.toByteArray(); 

MemoryStream ms = new MemoryStream(); 
ms.Write(byteArr, 0, byteArr.Length); 

HttpContext.Response.AddHeader("content-disposition", 
"inline; filename=" + randomName + ".pdf"); //random name is just a string based on time etc 

return new FileStreamResult(ms, "application/pdf"); 
}

這一切都工作完美。

問題：

後，我打電話提交（）的形式，該控制器被稱爲並返回並顯示在PDF同一選項卡上。我需要將此表單顯示在我擁有的模式窗口上。

HTML：

<div id="pdfdiv" style="display:none"> 
    <iframe id="pdfframe" style="width:100%; height:100%;"> 
    </iframe> 
</div>

JS：

$("#pdfdiv").dialog({ 
    height: ($(window).height() * 0.95), 
    width: ($(window).width() * 0.45), 
    position: { 
    my: "center bottom", 
    at: "center top", 
    of: $(window) 
    } 
});

我不知道該穿什麼「源」 iframe的屬性，使PDF在那裏顯示，而不是在sabe瀏覽器選項卡。我覺得這是很容易做的事情，我缺少一些東西，因爲我是網絡開發新手。

摘要：我從控制器返回的PDF顯示在同一個瀏覽器選項卡上，我需要讓它出現在jquery對話框中，但我不知道如何放置iframe src屬性，因爲pdf是在表單被提交。

來源

2014-09-18 victor

在什麼瀏覽器？或瀏覽器？ – 2014-09-18 21:07:34

鉻。 Pdf在一個內存流中。 – victor 2014-09-18 22:35:21

查看http://www.cloudformatter.com/CSS2Pdf中的JS，可以在新窗口中打開選項，下載並在實際文檔中嵌入PDF。還有一些瀏覽器嗅探發生，只給你什麼你可以有取決於瀏覽器。 – 2014-09-18 23:21:12

我解決我的問題。這裏的想法是，沒有辦法捕獲窗體（屬性操作）調用的方法/動作的返回。相反，我必須做的是從對話框中的iframe調用控制器動作。我使用了表單，因爲它是將數據作爲複雜對象傳遞給控制器的最簡單方法，但要從iframe執行此操作，必須使用對象的參數組裝URL並在控制器中讀取它們。我使用我需要的參數（名稱= .. & age = ...）構建了url，並在按鈕後動態設置iform src以顯示被單擊的模式窗口，導致操作返回到iframe並顯示我的PDF 。

來源

2014-09-20 23:28:19 victor

不要創建表單並調用它的submit（）方法。

使用jQuery $。員額（）在按鈕的點擊事件函數如下：

$.post("Home/generatePdf", { 
    "id" : "invform", 
    "name" : "Name", 
    "type" : "text", 
    "value" : cellValue, 

function(resp) { 
    //Success function 
    //Reply with a JSON string from server indicating the PDF URL in the url property 

    resp.url; //this should cointain the URL to your generated PDF 

}, 

"json" 

});

這將避免PDF從服務器到瀏覽器下載。

在「成功功能」上，打開模式並顯示PDF。您可以使用pdf。js庫（https://github.com/mozilla/pdf.js/）在模態內顯示PDF，請記住，如果您不使用此庫（或類似），除非在瀏覽器中安裝了PDF閱讀器擴展，否則PDF不會顯示在瀏覽器中。

我假設這些PDF是在服務器上生成的，並且可以稍後下載，否則只需將URL傳遞給pdf.js而不是執行$ .post（）。

另外，如果PDF不包含敏感，只需在模態窗口中使用它，Google文檔查看器就可以替代顯示PDF（無論是生成並存儲在服務器上還是通過URL實時存儲）但要注意的是，PDF被傳輸到谷歌文檔，以呈現，也是PDF URL必須是公開的（需要訪問不是用戶/密碼）：

<iframe src="http://docs.google.com/viewer?url=your-pdf-url.com/doc.pdf&embedded=true" width="600" height="780" style="border: none;"></iframe>

來源

2014-09-18 21:15:59 maxidirienzo

是不是隻是簡稱和$ .ajax類型的post？我在這裏讀到，我試圖做的事情不能用ajax請求來完成。另外，我沒有pdf的網址，如果我擁有它，我只會完成你所說的內容。我的pdf是在一個內存流中，它從來沒有物化。我現在意識到，使用表單對我正在嘗試做的事情來說是無法實現的。我需要從iframe URL調用Action，並填寫pdf，我將不得不在url中發送我的複雜對象的json，這是我不想做的。然而，這只是一種方式，我確定了一些簡單的方法來做到這一點。 – victor 2014-09-18 22:33:01

顯示在飛行模式對話框上創建的pdf

回答

相關問題