如何将1-3张图像打印到单个输出页面上?

问题描述 投票:0回答:1

我在Squarespace中有一个代码块,可以显示照片。照片目前设置为2500px宽。我的目标是有一个允许用户打印此图像的打印按钮 - 但最重要的是我希望它打印到一个页面上。我的最终代码很可能需要打印三张图片 - 再次打印到一个页面上。我根本不是程序员,并依赖于跟踪以下代码来隔离图像并打印它们。但是,现在图像打印到4-8页!我需要找到javascript或CSS代码,以确保最终打印限制在单个页面。任何人都可以修改我当前的代码吗?

我意识到这个问题类似于许多其他发布的问题。但是,我尝试过@media print CSS命令,但它们似乎根本不起作用(可能是因为我不理解代码!)。

<!DOCTYPE html>
<html>
<head>
  <title>Printdiv</title>
</head>
<body>

  <script type="text/javascript">

    function printyourimage(){

var print_div = document.getElementById("image1");
var print_area = window.open();
print_area.document.write(print_div.innerHTML);
print_area.document.close();
print_area.focus();
print_area.print();
print_area.close();

    }

  </script>
<form>
    <input type="button" value="Print Image" onclick="printyourimage()">
  </form>
</body>
</html>

回顾一下:此功能可将单个图像打印到多个页面上;但是,我想将最终的打印作业限制在一张纸上。如果我更改代码以容纳两个或三个图像,我仍然希望这可以编码以指导图像打印到一张纸上。

javascript css
1个回答
0
投票

这是未经测试的,但理论上它应该有效。确定显示的图像数量image_count,然后使用开关,确定图像应以%显示的最大高度(您可能需要使用尺寸来完成正确的配合)。

基于评论:

<style>
img{max-width:200px;margin:10px;display:block;}
</style>

原始答案:

var image_count = 3;
var image_height = "85%";

switch(image_count){
   case 2: image_height = "45%";
   case 3: image_height = "30%";
}

var print_div = document.getElementById("image1");
var print_area = window.open();
print_area.document.write(`<html><head><style>img{max-height:${image_height};}</style></head><body>${print_div.innerHTML}</body></html>`);
print_area.document.close();
print_area.focus();
print_area.print();
print_area.close();
© www.soinside.com 2019 - 2024. All rights reserved.