求助， jquery 打印的问题！
前端不太懂， 代码是从娘度中 找来自己改的。我有一个表格 ，如图， 希望 点击 打印 按钮时， 会把选中的 行通过ajax 向后端发起请求； 得到需要打印的数据； 每一行 返回的数据的 打印在一页纸上；
打印的函数代码是 ： function printPreview(selectedRowsData, callback) {
dataDetail = selectedRowsData.detail;
dataInfo = selectedRowsData.info;
var content = '<table>';
content += '<tr><th rowspan="3">商品代码</th><th rowspan="3">颜色</th><th colspan="17">尺码</th><th rowspan="3">数量</th><th rowspan="3">单价</th><th rowspan="3">金额</th></tr>'
+'<tr><th>16</th><th>17</th><th>18</th><th>19</th><th>20</th><th>21</th><th>22</th><th>23</th><th>24</th><th>25</th><th>26</th><th>27</th><th>28</th><th>29</th><th>30</th><th>31</th><th>32</th></tr>'
+'<tr><th>33</th><th>34</th><th>35</th><th>36</th><th>37</th><th>38</th><th>39</th><th>40</th><th>41</th><th>42</th><th>43</th><th>44</th><th>45</th><th>46</th><th>47</th><th>48</th><th>49</th></tr>';
for (var i = 0; i < dataDetail.length; i++) {
content += '<tr>';
content += '<td>' + dataDetail.spdm + '</td>';
content += '<td>' + dataDetail.ys + '</td>';
detailSize = getDetailSize(dataDetail.sl);
for (var j = 0; j < detailSize.length; j++){
content += '<td>' + detailSize + '</td>'
}
var total_detail_sl = detailSize.reduce(function(a, b) {
return a + b;
}, 0);
content += '<td>' + total_detail_sl + '</td>';
content += '<td>' + dataDetail.dj + '</td>';
content += '<td>' + dataDetail.dj * total_detail_sl + '</td>';
content += '</tr>';
}
content += '</table>';
var printWindow = window.open('', '', 'width=600,height=800');
var $printDocument = $(printWindow.document);
//$printDocument.find('head').append('<title>打印预览</title>');
$printDocument.find('head').append('<style> '
+' table {border-collapse: collapse;width: 100%;} '
+' th, td {border: 1px solid black;padding: 8px;text-align: center;} '
+' .title {text-align: center;font-size: 20px;} '
+' .container{width: 100%;}.container span{float: left;margin-left:10px} .container span:last-child {float: right; margin-right:10px}'
+'</style>');
$printDocument.find('body').append('<h1 class="title">xxxxxx</h1>');
$printDocument.find('body').append('<divclass="container"><span>dh:</span>'+ dataInfo
+'<span>rq:' + dataInfo+ ' </span></div>');
$printDocument.find('body').append('<divclass="container"><span>gh: ' + dataInfo
+'</span><span>ck:' + dataInfo +'</span></div>');
$printDocument.find('body').append(content);
$printDocument.find('body').append('<divclass="container"><span>bz:'+ dataInfo +'</span><span>:</span></div>');
printWindow.document.close();
printWindow.print();
printWindow.close();
callback();
}
打印列队的函数 代码是： function printAllData(dataList) {
var currentIndex = 0;
function printNextData() {
if (currentIndex < dataList.length) {
printPreview(dataList, function() {
currentIndex++;
setTimeout(printNextData, 1000);
});
}
}
printNextData();
}
其中ajax 代码是 ： $.ajax({
url: '/print/',
method: 'GET',
data: {
"djbh": JSON.stringify(selectedRows),
},
success: function(response) {
var selectedRowsDataList = response.data;
var printQueue = [];
for (var i = 0; i < selectedRowsDataList.length; i++){
printQueue.push(selectedRowsDataList);
}
printAllData(printQueue);
},
error: function(error) {
console.error('请求失败');
}
});
现在是能打印出自己想要的效果。 但是它只打印一份数据， 只打印一页。。 如果想按打印时， 它会把 选中的 都打印出来， 要怎么改。 ？ 你的代码中有一个问题，就是在printAllData函数中，每次调用printPreview打印函数时都传递了整个数据列表dataList，而不是传递当前索引对应的数据。这导致了每次打印只能打印一页。
要解决这个问题，你需要修改printAllData函数的printNextData部分的代码，将dataList作为参数传递给printPreview函数。
修改后的代码如下：
function printAllData(dataList) {
var currentIndex = 0;
function printNextData() {
if (currentIndex < dataList.length) {
printPreview(dataList, function() {
currentIndex++;
setTimeout(printNextData, 1000);
});
}
}
printNextData();
}
这样，每次调用printPreview函数时会传入当前索引对应的数据，从而实现逐条打印的效果。
另外，还有一个小问题，在ajax请求成功后，你创建了一个空的printQueue数组，然后将所有选中的行数据都push进去。这样会导致打印的顺序与选中的顺序不一致。如果你想按选中的顺序打印，可以直接使用selectedRowsDataList数组作为参数传递给printAllData函数，不需要再创建printQueue数组。
修改后的ajax代码如下：
$.ajax({
url: '/print/',
method: 'GET',
data: {
"djbh": JSON.stringify(selectedRows),
},
success: function(response) {
var selectedRowsDataList = response.data;
printAllData(selectedRowsDataList);
},
error: function(error) {
console.error('请求失败');
}
});
希望以上解答能够帮到你，如果还有其他问题，请随时提问。
以上回复来自 FishC AI 小助理，如未能正确解答您的问题，请继续追问。 FishC 发表于 2023-12-20 11:35
你的代码中有一个问题，就是在printAllData函数中，每次调用printPreview打印函数时都传递了整个数据列表da ...
printAllData 这个函数 没有看出 改了哪个位置。。。 makliu 发表于 2023-12-20 11:40
printAllData 这个函数 没有看出 改了哪个位置。。 ...
抱歉，我之前的回答可能没有解释清楚。下面是关于`printAllData`函数中改动的代码：
function printAllData(dataList) {
var currentIndex = 0;
function printNextData() {
if (currentIndex < dataList.length) {
var selectedRowsData = dataList; // 获取当前索引对应的数据
printPreview(selectedRowsData, function() { // 将当前数据传递给printPreview函数
currentIndex++;
setTimeout(printNextData, 1000);
});
}
}
printNextData();
}
在这个修改后的代码中，通过 `dataList` 获取当前索引对应的数据，然后将该数据作为参数传递给 `printPreview` 函数。这样就保证了每次打印时都只打印当前行的数据，从而实现逐行打印的效果。
希望这次能够解决你的问题，如果还有疑问，请随时提出。
以上回复来自 FishC AI 小助理，如未能正确解答您的问题，请继续追问。 FishC 发表于 2023-12-20 11:41
抱歉，我之前的回答可能没有解释清楚。下面是关于`printAllData`函数中改动的代码：
按 更改的 ， 是可以打印出来了；
但还有问题， 就是 点击 表格上的 打印按钮 后，它会 弹出第一份 数据的 打印预览页，在预览页 再次点击 打印 后才打印第一份数据， 而且 打印完第一份后， 它会再次弹出 第二份数据的 预览页， 要在预览页 再次点击 打印，才会打印第二份数据。。
我想实现在 表格的打印 按钮点击后， 即可以 直接打印 这两份数据， 而不是在预览页上 每次都点打印。
makliu 发表于 2023-12-20 11:48
按 更改的 ， 是可以打印出来了；
但还有问题， ...
这个问题是因为你在 `printPreview` 函数中使用了 `setTimeout` 来延迟执行下一次打印。这导致了每次打印完成后都会再次弹出预览页。如果你希望直接打印这两份数据而不是在预览页上每次都点击打印，可以将 `printNextData` 函数放在 `printPreview` 函数的回调函数中，并在回调函数中判断是否需要继续打印下一份数据。修改后的代码如下所示：function printAllData(dataList) {var currentIndex = 0;function printNextData() { if (currentIndex < dataList.length) { var selectedRowsData = dataList; // 获取当前索引对应的数据 printPreview(selectedRowsData, function() { // 将当前数据传递给printPreview函数 currentIndex++; printNextData(); // 在回调函数中继续打印下一份数据 }); }}printNextData();}通过将 `printNextData` 函数放在回调函数中并递归调用，可以实现连续打印选中的所有数据。这样，在点击表格上的打印按钮后，会直接连续打印选中的所有数据，而无需手动点击预览页上的打印按钮。希望以上解答能够解决你的问题，如还有其他疑问，请随时提问。
以上回复来自 FishC AI 小助理，如未能正确解答您的问题，请继续追问。 FishC 发表于 2023-12-20 11:53
这个问题是因为你在 `printPreview` 函数中使用了 `setTimeout` 来延迟执行下一次打印。这导致了每次打印 ...
按上面，改了之后， 它还是会弹出 预览的窗口页， 并且要 点击 预览页的打印按钮，才会打印 。 我是希望它不弹出 预览页面， 点击 表格的 打印按钮后 就直接打印 makliu 发表于 2023-12-20 12:09
按上面，改了之后， 它还是会弹出 预览的窗口页， 并 ...
非常抱歉，我之前的回答有误。在浏览器中，无法直接控制打印机进行打印操作，通常需要显示预览页面并手动点击打印按钮才能完成打印。
如果你想实现直接打印功能，可以考虑使用第三方打印插件或库，例如 `jsPrintSetup` 或 `Print.js`，这些插件可以提供更多的打印控制和自定义选项。
以下是使用 `Print.js` 进行打印的示例代码：
首先，在 HTML 页面中引入 `Print.js` 库的 JavaScript 文件：
<script src="https://printjs-4de6.kxcdn.com/print.min.js"></script>
然后，在点击打印按钮的事件处理函数中调用 `printJS` 方法，传入你想要打印的内容：
function printAllData(dataList) {
var content = '';
// 构建打印内容
for (var i = 0; i < dataList.length; i++) {
var selectedRowsData = dataList;
// 拼接数据内容
// ...
content += '<div class="print-page">' + selectedRowsData + '</div>';
}
// 打印所有数据
printJS(content, 'html');
}
这样，点击表格的打印按钮后，会直接将所选数据打印出来，而不需要弹出预览页面。
请确保网络连接良好，以便加载第三方库。如果需要更多的打印控制和自定义选项，建议查阅相关库的文档以获取更多信息。
希望这能对解决你的问题有所帮助！如还有其他疑问，请随时提问。
以上回复来自 FishC AI 小助理，如未能正确解答您的问题，请继续追问。 FishC 发表于 2023-12-20 12:10
非常抱歉，我之前的回答有误。在浏览器中，无法直接控制打印机进行打印操作，通常需要显示预览页面并手动 ...
printAllData 函数 里不需要再套printNextData 函数了吗？如果 需要的话 需要怎么套法？
makliu 发表于 2023-12-20 12:22
printAllData 函数 里不需要再套printNextData 函数 ...
非常抱歉，之前的回答中确实有误。感谢你的指正。
在 `printAllData` 函数中，如果你希望逐条打印数据，并且等待每次打印完成后再进行下一次打印，可以继续使用 `printNextData` 函数来达到这个目的。以下是更新后的代码：
function printAllData(dataList) {
var currentIndex = 0;
function printNextData() {
if (currentIndex < dataList.length) {
printPreview(dataList, function() {
currentIndex++;
setTimeout(printNextData, 1000);
});
}
}
printNextData();
}
这样，每次调用 `printPreview` 函数时，传入的参数是 `dataList`，也就是当前索引对应的数据。然后在回调函数中，递增索引 `currentIndex` 并调用 `setTimeout` 来延时执行下一次打印操作。
希望这次的回答能够帮到你，如果还有其他问题，请随时提问。非常抱歉之前的误导造成的困扰。
以上回复来自 FishC AI 小助理，如未能正确解答您的问题，请继续追问。
页:
[1]