Question

我有一些小图片，每张图片都有一个“打印大图”链接。

例如：

<img src="thumb.jpg">
<a href="#">Print Larger Image</a>

当用户点击“打印大图”链接时，我的目标是触发“big.jpg”的打印。

如何做到这一点？

编辑：ANTHONY对我有正确的解决方案。我修改了他的代码，让它工作。这是完整的工作代码

<style>
@media screen {
.printimage {
     display: none;
}
}

@media print {
body * {
    display: none;
}
.printimage {
     display: block;
}
}

</style>

<a id="bigimage" href="#">Print Big Image</a>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script>
 $(document).ready(function(){

     $("#bigimage").click(function() {
          $("body").append("<img src='http://sstatic.net/so/img/logo.png' class='printimage' >");
          window.print();
     });

});

</script>

Answer 1

<a href="javascript:window.Print(); return false;">Print Larger Image</a>

这将打印当前页面，但要添加到JoostK的答案，请重定向到图像：

<a href="page.php?image=big.jpg">Print Larger Image</a>

然后在page.php中，加载你的图像，然后在body onload事件中，调用window.print（）;

修改

为了让用户留在同一页面，我不相信是可能的，但你可以做的是：

<a href="page.php?image=big.jpg" target="_blank">Print Larger Image</a>

然后在调用window.print();之后你可以调用window.close();（这可能会弹出一个对话框，说明浏览器想要关闭当前窗口就可以了，或者沿着那些行显示）

Answer 2

window.print（）将在javascript中执行，但这只会打印当前页面。如果您尝试将img启动到新选项卡并运行print命令，则必须组合一些命令。

Answer 3

这会非常奇怪和令人敬畏，但你可以做的一件事是：

让print large image链接触发一个javascript函数，将较大的图像插入DOM，并使用“printable_image”类。

然后设置CSS规则，使用@screen和@print规则隐藏浏览器中的图像，但隐藏打印输出图像以外的所有内容。

然后调用已经提到的window.print()函数。唯一的问题是，如果用户只是想打印屏幕，他们就不会看到任何内容，因此您必须使用js添加@print规则以避免这种情况。

HTML：

<img src="thumb.jpg">
<a href="#" id="bigimage">Print Larger Image</a>

JS（在jquery中）：

$function() {
     $("#bigimage").click(function() {
          $(body).amend("<img src='bigimage.png' class="printimage" />");
     });
});

CSS：

@media screen {
.printimage {
     display: none;
}
}

@media print {
body * {
    display: none;
}
.printimage {
     display: block;
}
}

Answer 4

<img src="thumb.jpg" alt="Alternative text" />
<a href="big.jpg">Print Larger Image</a>

这是非常基本的HTML，没有JS / PHP或任何需要的东西。

Answer 5

您可以创建这样的链接来打印当前页面......

<a href="JavaScript:window.print();">Print this page</a>

或者一旦加载就自动打印页面，你可以做这样的事情......

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

如何创建触发文件打印的链接？

5 个答案: