0

我正在使用以下打印插件：Ask Ben Print Plugin

该插件适用于页面上的任何内容，除了输入字段内容。我需要能够打印出包含输入字段内容的页面，由于某种原因，在使用此插件时，输入字段不会出现在打印预览/最终打印文档上。当我简单地使用 Ctrl+P 方法打印出包含输入字段的页面时，输入字段的内容显示良好。

我想知道是否有人可以帮助我确定下面的代码阻止我打印输入字段内容的原因是什么？提前谢谢了！

jQuery函数调用：

$(".main-container").print();

Javascript：

// 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;

    // Grab all the style tags and copy to the new
    // document so that we capture look and feel of
    // the current document.
    // Create a temp document DIV to hold the style tags.
    // This is the only way I could find to get the style
    // tags into IE.
    var jStyleDiv = $("<div>").append(
    $("style").clone());

    // 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(jStyleDiv.html());
    objDoc.write("</head>");
    objDoc.write(this.html());
    objDoc.write("</body>");
    objDoc.write("</html>");
    objDoc.close();

    // 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));
}​
4

1 回答 1

1

该插件用于$(this).html();确定发送到打印 iFrame 的内容。如果您专门选择输入，您还需要指定值以获取要打印的输入文本。<div>当我运行测试时，如果我将输入包装在 a 中并告诉插件打印包含的 div ，我就能够打印输入字段的内容。编辑：我将value="",<input>注册为 HTML 的插件设置为插件，而不是添加文本然后启动打印功能。

这是一个 jsFiddle：http: //jsfiddle.net/radiatorsounds/D5tef/

为了澄清，您需要将value=""每个输入（算作 HTML）设置为它的val()（不是），以便 parentDiv.html() 正确抓取它。我已经用这段代码更新了小提琴，它需要在print();命令运行之前运行。

$('#printTheDivLink').click(function() {
    $('div input').each(function() {
        $(this).attr('value', $(this).val());
    });
    $('#divToPrint').print();
});​
于 2012-12-10T03:16:00.330 回答