Question

我在Squarespace中有一个代码块，可以显示一张照片。该照片当前设置为2500像素宽。我的目标是拥有一个允许用户打印此图像的打印按钮-但最重要的是我希望将其打印到一页上。我的最终代码很可能需要将三个图像再次打印到一页上。我根本不是程序员，而是依靠跟踪以下代码来隔离图像并打印它们。但是，现在图像可以打印到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>

回顾：此功能将单张图像打印到多页上；但是，我想将最终打印作业限制在一张纸上。如果我更改代码以容纳两个或三个图像，我仍然希望该代码可以将图像引导到一张纸上。

Answer 1

这未经测试，但理论上应该可以。确定要显示的图像数量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();

如何在单个输出页面上打印1-3张图像？

1 个答案: