gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-28 00:03:34 30 4
gpt4 key购买 nike

我在 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>

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

最佳答案

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

关于javascript - 如何将 1-3 张图像打印到单个输出页面上?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55853880/

30 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com