Javascript 打印多页时的Div定位_Javascript_Html

Javascript 打印多页时的Div定位

javascript html

Javascript 打印多页时的Div定位,javascript,html,Javascript,Html,下午好因此，我有一个页面，其中circle.png图像正在使用JS移动，以圈出我指定的某些固定点。代码如下： <script language='JavaScript' type='text/JavaScript'> <!-- function move_img(str) { switch(str){ case "ss": document.getElementById('dwr_style').style.left=118 + "px"; document.getElem

下午好

因此，我有一个页面，其中circle.png图像正在使用JS移动，以圈出我指定的某些固定点。代码如下：

<script language='JavaScript' type='text/JavaScript'>
<!--
function move_img(str) {

switch(str){
case "ss":
document.getElementById('dwr_style').style.left=118 + "px";
document.getElementById('dwr_style2').style.left=118 + "px";
document.getElementById('dwr_style2').style.top=1410 + "px";
break;

case "rout":
document.getElementById('dwr_style').style.left=180 + "px";
document.getElementById('dwr_style2').style.left=180 + "px";
document.getElementById('dwr_style2').style.top=1410 + "px";
break;

case "fp":
document.getElementById('dwr_style').style.left=240 + "px";
document.getElementById('dwr_style2').style.left=240 + "px";
document.getElementById('dwr_style2').style.top=1410 + "px";
break;

case "dt_std":
document.getElementById('dt').style.left=390 + "px";
document.getElementById('dt2').style.left=390 + "px";
document.getElementById('dt2').style.top=1678 + "px";
document.getElementById('dt').style.width=70 + "px";
document.getElementById('dt2').style.width=70 + "px";
break;

case "dt_34":
document.getElementById('dt').style.left=465 + "px";
document.getElementById('dt').style.width=40 + "px";
document.getElementById('dt2').style.left=465 + "px";
document.getElementById('dt2').style.width=40 + "px";
document.getElementById('dt2').style.top=1678 + "px";
break;

case "dt_1":
document.getElementById('dt').style.left=505 + "px";
document.getElementById('dt').style.width=40 + "px";
document.getElementById('dt2').style.left=505 + "px";
document.getElementById('dt2').style.width=40 + "px";
document.getElementById('dt2').style.top=1678 + "px";
break;
}
}
//-->
</script>
</head>
<body>

<img src="CalDoor.jpg">
<div style="position:absolute;top:30;left:590;">1</div>
<input type=text style="position:absolute;border:none;top:185;left:100;" placeholder="Enter Job Name">
<?php

$file = $_FILES['uploaded_file']['tmp_name'];
$file2 = nl2br(file_get_contents($file));
$file3 = str_replace('"' , '' , $file2);
$file4 = str_replace('ÿþ' , '' , $file3);
$line_break = explode("<br />" , $file4);
$topchange=105;
$count = 0;
foreach ($line_break as $final1) {

    $final2 = explode(";" , $final1);
        $regex = '#\((([^()]+|(?R))*)\)#';
        preg_match($regex, $final1, $match);

            $type = "S";
            if ($final2[4] == "DF") {
              $type = "DF";
            }
            if ($final2[6] == "Glass") {
                $type = "GL";
            }
            if ($count == 24) {
                $topchange = 1097;
                $pagecount = 2;
                echo '<img src="CalDoor.jpg" style="position:absolute;top:1000;left:8;">';
                echo '<div style="position:absolute;top:1022;left:590;">2</div>';
                echo '<div style="position:absolute;top:1022;left:640;">'. $pagecount .'</div>';
                echo "<img src='circle.png' id='fds' style='position:absolute;Top:1297;Left:20;' width=80 height=25>";
                echo "<img src='circle.png' id='dwr_style2' style='position:absolute;Top:1410;Left:118;' width=70 height=30>";
                echo "<img src='circle.png' id='dt2' style='position:absolute;Top:1678;Left:392;' width=70 height=30>";

            }


         echo "<div style='position:absolute;TOP:". $topchange .";LEFT:395;'>". $final2[1] ."</div>";
         echo "<div style='position:absolute;TOP:". $topchange .";LEFT:450;'>". $final2[3] ."</div>";
         echo "<div style='position:absolute;TOP:". $topchange .";LEFT:365;'>". $match[0] ."</div>";
         echo "<div style='position:absolute;TOP:". $topchange .";LEFT:335;'>". $type ."</div>";
         echo "<div style='position:absolute;TOP:". $topchange .";LEFT:532;'>". $final2[6] ."</div>";
            $changeamt = 24.2;
            $topchange = $topchange + $changeamt;
            $count++;



}
echo '<div style="position:absolute;top:30;left:640;">'; 
echo $pagecount; 
echo '</div>';

?>
<img src='circle.png' id='fds' style='position:absolute;Top:305;Left:20;' width=80 height=25>
<img src='circle.png' id='dwr_style' style='position:absolute;Top:420;Left:118;' width=70 height=30>
<img src='circle.png' id='dt' style='position:absolute;Top:685;Left:392;' width=70 height=30>
<div class='no-print' style='position:absolute;TOP:50;LEFT:900;'>
<b>Drawer Type: </b><br>
<input type=button onClick=move_img('ss') value='Solid Stock'>
<br>
<input type=button onClick=move_img('rout') value='Routed'>
<br>
<input type=button onClick=move_img('fp') value='Five Piece'>
<br><br>
</div>

<div class='no-print' style='position:absolute;TOP:158;LEFT:900;'>
<b>Door Thickness: </b><br>
<input type=button onClick=move_img('dt_std') value='Std 13/16"'>
<br>
<input type=button onClick=move_img('dt_34') value='3/4"'>
<br>
<input type=button onClick=move_img('dt_1') value='1"'>
<br><br>
</div>


1.
抽屉类型：








门厚度：

这些圆是绝对的，因为我将它们投射到我的CalDoor图像上。当我的文件出现并且有超过24行的数据时，我让它在下面投影第二个CalDoor图像，并添加相应的圆以匹配上面的图像。唯一的问题是，当我开始打印时，它会像我想要的那样在两个单独的页面上显示CalDoor图像，第二页上的圆圈保持水平位置，但不保持垂直位置。有什么原因吗

谢谢。

您能提供一个jsbin或JSFIDLE来显示问题吗？您的示例代码根本没有CSS，因此很难回答您的问题。所有CSS实际上都在代码中。代码中没有比这更多的东西，JSFIDLE也帮不了什么忙，因为问题在于打印页面。我不相信您可以打印JSFIDLE的结果部分。关键是您的代码从

头中的脚本标记开始，结束时不关闭正文或html
标记。你的PHP包含在你身体的中间，做一些事情，但是我不打算通过我的脑袋运行PHP代码，并试图弄清楚最终的HTML会是什么样子。我不知道在你发布代码之前或之后会发生什么，这可能会有所不同。您使用的浏览器也很重要。你在IE7/8/9/10/edge、Firefox、Chrome、Safari上也能得到同样的结果吗？如果你不想胡闹，或者你认为这没用，在你自己的服务器上弹出一个示例页面来帮助我们调试。