首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >短而甜蜜的打印插件工作很好,但不打印输入域的内容?

短而甜蜜的打印插件工作很好,但不打印输入域的内容?
EN

Stack Overflow用户
提问于 2012-12-10 10:59:13
回答 1查看 167关注 0票数 0

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

这个插件对页面上的任何东西都很有效,除了输入域的内容。我需要能够打印出包含输入字段内容的页面,由于某些原因,当使用此插件时,输入字段不会出现在打印预览/最终打印文档上。当我简单地使用Ctrl+P方法打印出一个包含输入字段的页面时,输入字段的内容显示得很好。

我想知道是否有人可以帮助我找出是什么关于下面的代码阻止我能够打印出输入字段内容?首先要感谢大家!

JQuery函数调用:

代码语言:javascript
复制
$(".main-container").print();

Javascript:

代码语言: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));
}​
EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2012-12-10 11:16:00

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

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

为了清楚起见,您需要将每个输入的value="" (算作超文本标记语言)设置为它的val() (不是),以便parentDiv.html()正确地获取它。我已经用这段代码更新了小提琴,它需要在运行print();命令之前运行。

代码语言:javascript
复制
$('#printTheDivLink').click(function() {
    $('div input').each(function() {
        $(this).attr('value', $(this).val());
    });
    $('#divToPrint').print();
});​
票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/13794405

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档