如何在javascript打印中添加图像数量功能？答案

【问题标题】：How to add image quantity functions in printing in javascript?如何在javascript打印中添加图像数量功能？
【发布时间】：2021-02-01 01:08:57
【问题描述】：

这是我想要实现的示例，首先用户将选择图像，然后他们将输入他们想要在打印页面上显示的图像块数，我已经创建了添加图像并打印它的功能但它只是我想创建的一个，可以打印多个图像，这取决于用户输入的内容。

这是我的代码：

var myApp = new function() {
this.geltint = function() {
var tab = document.getElementById('geltint');

var style = "<style>";
style = style + "table {width: 100%;font: 17px Calibri;}";
style = style + "table, th, td {border: solid 1px #DDD; border-collapse: collapse;";
style = style + "padding: 2px 3px;text-align: center;}";
style = style + "</style>";

var win = window.open('', '', 'height=700,width=700');
win.document.write(style); //  add the style.
win.document.write(tab.outerHTML);
win.document.close();
win.print();
}
}
var myApp2 = new function() {
this.powdery = function() {
var tab = document.getElementById('powdery');

var style = "<style>";
style = style + "table {width: 100%;font: 17px Calibri;}";
style = style + "table, th, td {border: solid 1px #DDD; border-collapse: collapse;";
style = style + "padding: 2px 3px;text-align: center;}";
style = style + "</style>";

var win = window.open('', '', 'height=700,width=700');
win.document.write(style); //  add the style.
win.document.write(tab.outerHTML);
win.document.close();
win.print();
}
}
var myApp3 = new function() {
this.powdery5ml = function() {
var tab = document.getElementById('powdery5ml');

var style = "<style>";
style = style + "table {width: 100%;font: 17px Calibri;}";
style = style + "table, th, td {border: solid 1px #DDD; border-collapse: collapse;";
style = style + "padding: 2px 3px;text-align: center;}";
style = style + "</style>";

var win = window.open('', '', 'height=700,width=700');
win.document.write(style); //  add the style.
win.document.write(tab.outerHTML);
win.document.close();
win.print();
}
}

function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();

reader.onload = function(e) {
  $('#geltint')
    .attr('src', e.target.result)
    .width(244.8)
    .height(187.2);
};

reader.readAsDataURL(input.files[0]);
}
}

function readURL2(input) {
if (input.files && input.files[0]) {
var reader2 = new FileReader();

reader2.onload = function(e) {
  $('#powdery')
    .attr('src', e.target.result)
    .width(172.8)
    .height(230.4);
};

reader2.readAsDataURL(input.files[0]);
}
}

function readURL3(input) {
if (input.files && input.files[0]) {
var reader2 = new FileReader();

reader2.onload = function(e) {
  $('#powdery5ml')
    .attr('src', e.target.result)
    .width(244.8)
    .height(105.6);
};

reader2.readAsDataURL(input.files[0]);
}
}

这是我的 HTML 代码：

<HTML>
<head>
<link class="jsbin" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/base/jquery-ui.css" 
rel="stylesheet" type="text/css" />
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.0/jquery-ui.min.js">
</script>
<meta charset=utf-8 />
<title>JS Bin</title>
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>
article,
aside,
figure,
footer,
header,
group,
menu,
nav,
section {
  display: block;
}
</style>
</head>

<body>
<div id="1stimage">
<input type='file' onchange="readURL(this);" />
<img id="geltint" src="#" alt="your image" />
<p>
  <input type="button" value="Print Table" onclick="myApp.geltint()" />
</p>
</div>

<div id="2ndimage">
<input type='file' onchange="readURL2(this);" />
<img id="powdery" src="#" alt="your image" />
<p>
  <input type="button" value="Print Table" onclick="myApp2.powdery()" />
</p>
</div>

<div id="3rdimage">
<input type='file' onchange="readURL3(this);" />
<img id="powdery5ml" src="#" alt="your image" />
<p>
  <input type="button" value="Print Table" onclick="myApp3.powdery5ml()" />
</p>
</div>
</body>

</html>

这是示例，我希望我的输出看起来简单明了任何您可以与我分享的建议或想法，非常感谢。

用户将选择一个图像，然后输入他们想要多少份图像的数量，然后按打印它会显示这样的打印预览以及用户输入的图像总数

【问题讨论】：

标签： javascript html jquery printing

【解决方案1】：

您可以使用for-loop 并迭代直到<= quantity 由用户输入数量并在此for-loop 中使用+= 在某个变量中附加tab.outerHTML。因此，您可以更改代码，如下所示：

HTML：

<div id="1stimage">
  <input type='file' onchange="readURL(this);" />
  <!--added qty -->
  <input type="number" value="1" class="qty">
  <img id="geltint" src="#" alt="your image" />
  <p>
    <!--pass this as well-->
    <input type="button" value="Print Table" onclick="myApp.geltint(this)" />
  </p>
</div>
<!--do same for others ...->

Js 代码：

var myApp = new function() {
  this.geltint = function(el) {
    var tab = document.getElementById('geltint');
    var qty = $(el).closest("div").find(".qty").val(); //get qty value
    console.log(qty)
    var style = "<style>";
    style = style + "table {width: 100%;font: 17px Calibri;}";
    style = style + "table, th, td {border: solid 1px #DDD; border-collapse: collapse;";
    style = style + "padding: 2px 3px;text-align: center;}";
    style = style + "</style>";
    var html = "";
    //loop
    for (var i = 1; i <= qty; i++) {
      html += tab.outerHTML //append
    }

    var win = window.open('', '', 'height=700,width=700');
    win.document.write(style); //  add the style.
    win.document.write(html); //pass same
    win.document.close();
    win.print();
  }
}

【讨论】：

一切都很好我实现了我想要的输出你真的帮了我很多我欠一个先生非常感谢您的教程 Keepsafe always 先生。谢谢。
Maam 请问我是否要在打印时在每个图像中添加空格我应该在哪里添加代码？
您可以更改html +="<div style='padding:10px'>"+tab.outerHTML+"</div>" 给任何样式以在图像之间留出空间。
好的，我明白了妈妈，最后一个问题，女士，按照您提供的方法，我是否可以一键打印所有三张图像并添加我输入的数量？我的意思是我将添加“全部打印”按钮，这样它将打印所有 3 张图像和总数
检查this fiddle 是否适合您。