0

目前我有一个包含很多 div 、 menu 和许多其他布局人员的 Web 应用程序。但是，在某些情况下，当用户单击打印时，我想要的只是两张图像或一张图像。假设我已经获得了两个图像 url，如何删除整个页面的 css 并按预期执行打印？这是我尝试过的一些代码，它似乎会将整个页面从 Web 应用程序布局更改为只有 2 个图像？我可以防止吗？谢谢：

打印.css

<style type="text/css" media="print">
    .img{
        padding:5%;
        height:100%;
        width:40%;
    }
    #img1{
        left:0px;
    }
</style>

js

$("#printBtn").click(function() {
    $("link[media='screen']").attr("href", "print.css");
    window.print();
});

更新：

更准确地说，我要做的是获取当前页面的图像编号，并且只会打印这两个图像。如何执行这样的功能？

假设我已经得到了两个 img 的 id。首先，我需要在这两项中动态添加 class = 'img' 吗？打印完成之前的下一步是什么？谢谢

<img id="img_34" src="demo/medium/Web081112_P034_medium.jpg" alt="flip book">
<img id="img_35" src="demo/medium/Web081112_P034_medium.jpg" alt="flip book">
4

3 回答 3

1

您可以隐藏整个页面（即）正文。

使用 CSS：

body {
visiblilty:hidden;
}

然后让你的 div 可见（你的图像被渲染的地方）

#yourdiv{
visibility:visible;
}

然后使用 window.print(); 这将打印#yourdiv

于 2012-12-28T08:39:50.003 回答
1

为什么你把你改成<link media='screen' />print.css 样式表？

如果您只是并排使用 ascreen和样式表，这是更好的做法。print不需要 Javascript / jQuery：

<!-- Default styling -->
<link rel="stylesheet" type="text/css" href="/css/default.css" media="screen" />

<!-- This styling is only used for printing -->
<link rel="stylesheet" type="text/css" href="/css/print.css" media="print" />

要回答您的问题，您只需在页面底部添加一个 div，<div id='print-wrap'></div>然后将所有打印的东西放在那里。

然后，在您的 CSS 中，您执行以下类似操作：

默认.css

#print-wrap { display: none; }

打印.css

img { display: none; }
#print-wrap { display: block; }
#img_34 { display: block !important; }
#img_35 { display: block !important; }

更新

更新了对应于更新问题的答案。如果您只想在打印页面上显示两个图像，只需隐藏所有其他图像display: none;并显示您要打印的图像display: block !important;

于 2012-12-28T08:46:35.553 回答
1

当您在屏幕（网页）上时，您的print css和screen css不会一起使用，打印 css仅在您的媒体打印（打印）时才会被引用。

每当发出打印命令时，打印 css 都会与 一起引用screen css，打印特定 css 属性具有更高的优先级。
每当您完成并返回到同一页面时，该页面将在发出打印命令之前返回。

从W3开始，

打印

用于分页材料和在打印预览模式下在屏幕上查看的文档。

在您的特定情况下，您只想打印 2 张图像，而不是全部。所以，

print.css :

img {
    display: none;
}
#img_34, #img_35 {      /*Image id's*/
    display: block;
}

要使用打印 css 测试页面，只需在浏览器中进行打印预览以了解其外观，然后按Esc返回页面。

如果您有兴趣阅读更多关于打印 css 和指南的信息，这是SmashingMagazine的一篇好文章

于 2012-12-28T09:18:09.983 回答