使用 jQuery 和 google chrome 浏览器问题打印动态 DIV答案

【问题标题】：Print a Dynamic DIV with jQuery and google chrome browser issue使用 jQuery 和 google chrome 浏览器问题打印动态 DIV
【发布时间】：2013-01-11 11:31:26
【问题描述】：

我的页面中有一个按钮。当用户单击该按钮时，我会动态生成一个 div，在其中动态分配一些文本和图像，并通过 jquery 插件打印该 div。我用一个名为 jquery.printElement.min.js

的 jquery div 打印插件做到了这一点

我的代码在 IE 和 FF 浏览器中运行良好，但在 chrome 中运行。如果 chrome 图像未分配或加载到 div 中，则仅打印文本。

这是我的代码，通过它我将图像和文本分配到 div 并通过 jquery 插件打印该 div。

$("#Print").click(function () {
    if (ImgPath != '') {
        sHtml = "<div id='dvPrint' ><table>";
        sHtml += "<tr><td>" + "<img src='" + ImgPath + "' height='600' width='400' border='0'/>" + "</td></tr>";
        sHtml += "<tr><td>" + $('#lblTxt').html() + "</td></tr>";
        sHtml += "</table></div>";
        var $dvPrint = $(sHtml);
        //alert(ImgPath);
        $dvPrint.printElement();  // jquery div print plug-in
    }
    else {
        alert("Image not found for print");
    }
    return false;
});

插件网址：-https://github.com/erikzaadi/jQueryPlugins/tree/master/jQuery.printElement

【问题讨论】：

我的猜测是这只是一个加载问题。在 chrome 尝试打印时未加载图像，并且 FF 和 IE 可能会等到图像加载完毕。编辑：如果您在致电$dvPrint.printElement(); 之前预加载图像，它可能会起作用
为什么，在分配src时，你使用'然后"？ <img src='" + ImgPath + "'。这可能会导致这样的问题
@Tiago Salzmann ' 用于src 的开头和结尾，" 是字符串，所以它是正确的。
哦，我以为 ImgPath 已经有了...
感谢我删除所有单引号然后它适用于 chrome。

标签： jquery google-chrome html printing

【解决方案1】：

我不太确定，为什么 Chrome 会这样，但我猜它与那个插件有关

您可以尝试手动执行此操作。做一个很简单的页面，里面有一个url参数，就是imagePath

例如“/printImage.php?src=path/img.jpg”

...

<body onload="window.print()">

<?php
   echo '<img src="' . $_GET["src"] . '"/>'
?>

...

打开一个带有该页面 url 的弹出窗口，并在加载时调用 window.print()

【讨论】：

在这里我询问 jquery，你给了我 php 的示例。
当然，我没有提供 jQuery 代码，我的回答仍然非常符合上下文。我提供了使用该特定 jQuery 插件的替代方法。 php 代码仅供参考，以了解页面的外观。