jquery從模態窗口打印

我有幾個模態窗口，我試圖添加「打印這個」功能。我找到了一個腳本，我試圖修改它。他創建一個iframe，加載html，打印並關閉框架。我打算將我的ajax html響應插入該div。出於某種原因，我的ajax響應沒有加載到我想要打印的div中。這是我的：jquery從模態窗口打印

// Create a jquery plugin that prints the given element. 
jQuery.fn.print = function(){ 
// NOTE: We are trimming the jQuery collection down to the 
// first element in the collection. 
if (this.size() > 1){ 
    this.eq(0).print(); 
    return; 
} else if (!this.size()){ 
    return; 
} 

// ASSERT: At this point, we know that the current jQuery 
// collection (as defined by THIS), contains only one 
// printable element. 

// Create a random name for the print frame. 
var strFrameName = ("printer-" + (new Date()).getTime()); 

// Create an iFrame with the new name. 
var jFrame = $("<iframe name='" + strFrameName + "'>"); 

// Hide the frame (sort of) and attach to the body. 
jFrame 
    .css("width", "1px") 
    .css("height", "1px") 
    .css("position", "absolute") 
    .css("left", "-9999px") 
    .appendTo($("body:first")) 
; 

// Get a FRAMES reference to the new frame. 
var objFrame = window.frames[ strFrameName ]; 

// Get a reference to the DOM in the new frame. 
var objDoc = objFrame.document; 

// Write the HTML for the document. In this, we will 
// write out the HTML of the current element. 
objDoc.open(); 
objDoc.write("<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">"); 
objDoc.write("<html>"); 
objDoc.write("<body>"); 
objDoc.write("<head>"); 
objDoc.write("<title>"); 
objDoc.write(document.title); 
objDoc.write("</title>"); 
objDoc.write("<div id='viewNotes'></div>"); 
objDoc.write("</head>"); 
//objDoc.write(this.html()); 
objDoc.write("</body>"); 
objDoc.write("</html>"); 
//objDoc.close(); 

formData = 'cmid=C93F52DCE21ABBD5'; 
$.ajax({ 
    url: 'ajax/ajax_get_notes.cfm', 
    type: 'GET', 
    data: formData, 
    cache: false, 
    success: function(result) { 
     $('#viewNotes').html(result); 
    }, 
    error: function(xmlHttpRequest, status, err) { 
     $('#viewNotes').html('error:'+err); 
    } 
});  

// Print the document. 
objFrame.focus(); 
//objFrame.print(); 

// Have the frame remove itself in about a minute so that 
// we don't build up too many of these frames. 
setTimeout(
    function(){ 
     jFrame.remove(); 
    }, 
    (60 * 1000) 
    ); 

alert('i am here'); 
}

我在做什麼錯？有沒有更好的方法來完成這一點？

來源

2010-05-19 CFNinja

我看到一些錯誤的東西。

首先，由於沒有結束標籤，因此不會創建iFrame。其次，iFrame永遠不會被添加到頁面中。第三，jFrame CSS沒有被正確聲明（應該是'#jframe'）。第四，html標籤的順序錯誤。

我認爲你可以像這樣去：

var strFrameName = ("printer-" + (new Date()).getTime()); 

// Create an iFrame with the new name. 
var jFrame = $("<iframe name='" + strFrameName + "'><div id='viewNotes'></div></iframe>"); 

// Get a FRAMES reference to the new frame. 
var objFrame = window.frames[ strFrameName ]; 

// Get a reference to the DOM in the new frame. 
var objDoc = objFrame.document; 

// Write the HTML for the document. In this, we will 
// write out the HTML of the current element. 
objDoc.open(); 
objDoc.write("<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">"); 
objDoc.write("<html>"); 
objDoc.write("<head>"); 
objDoc.write("<title>"); 
objDoc.write(document.title); 
objDoc.write("</title>"); 
objDoc.write("</head>"); 
objDoc.write("<body>"); 
objDoc.write(jframe); 
objDoc.write("</body>"); 
objDoc.write("</html>"); 
//objDoc.close(); 

formData = 'cmid=C93F52DCE21ABBD5'; 
$.ajax({ 
    url: 'ajax/ajax_get_notes.cfm', 
    type: 'GET', 
    data: formData, 
    cache: false, 
    success: function(result) { 
     $('#viewNotes').html(result); 
    }, 
    error: function(xmlHttpRequest, status, err) { 
     $('#viewNotes').html('error:'+err); 
    } 
});  
//print

來源

2010-05-19 16:32:28 Dave

嗨戴夫。感謝您的迴應，但我得到一個：objFrame是未定義的錯誤在螢火蟲。 – CFNinja 2010-05-19 17:00:08

我最終實現不同的東西。我創建了另一個名爲printNotes.cfm的頁面，類似於筆記模式窗口。我將一個window.open事件附加到模式窗口中的「可打印版本」按鈕上。點擊後，會啓動printNotes.cfm，並且此頁面通過ajax加載註釋。在printNotes.cfm中，有一個打印機按鈕，並觸發window.print（）事件，一旦點擊。

它就像一個魅力。

謝謝

來源

2010-05-19 20:21:36 CFNinja

jquery從模態窗口打印

回答

相關問題