Данные формы не сохраняются, если печать отменена - PullRequest
Новая
       9

Данные формы не сохраняются, если печать отменена

0 голосов
/ 09 октября 2019

Я пишу страницу, где пользователь может ввести информацию, и на холсте будет нарисовано представление. Размер экранного холста будет изменен в соответствии с размером окна (для ясности эта функция теперь не включена). Если страница напечатана, размер холста изменится, чтобы лучше поместиться на бумаге и скрыть входные данные. В Firefox данные формы сохраняются, если я не отменяю печать, но в противном случае данные будут потеряны. Internet Explorer, похоже, все время теряет данные. Следующий код является урезанной версией, но поведение остается тем же.

Я попытался создать переменную в функции hidebody, которая могла бы захватить значение, прежде чем скрыть таблицу, а затем снова заполнить ее, когда она снова станет видимой. Это не имело никакого значения.

Есть ли лучший способ сохранить данные формы? 

<!DOCTYPE html>
<html>
<head>
<title>TITLE</title>
</head>
<body>
<div id="noprint">
<h1 style="text-align:center;">TITLE</h1>

<form method="POST" name="form1">
<table border="0" cellpadding="0" width="340" id="table1">
<tr>
<td width="20" align="right">Length</font></td>
<td width="10">&nbsp;</td>
<td width="5"><input type="text" name="bLength" size="5" tabindex="1" onchange="redraw()"></td>
</tr>
</table>
<p>
<button onclick="Hidebody()">Print Template</button>
</p>
</div>

<canvas id="myCanvas" width="600" style="border:1px;">
Your browser does not support the HTML5 canvas tag.</canvas>

<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
redraw();
function Hidebody() {

    var canvaswidth = c.width;
    document.getElementById("noprint").style.display = "none";
    c.width=1500;

    redraw();
  window.print();
    document.getElementById("noprint").style.display  = "inherit";
    c.width=canvaswidth;
    redraw();
}

function redraw(){
 c.height=c.width/2;
var TESTlength = document.form1.bLength.value*1;
var bscale = (c.width-20)/TESTlength;

ctx.beginPath();
ctx.rect(10,10,TESTlength*bscale,TESTlength*bscale/2);
ctx.stroke();   
ctx.font = "10pt Arial";
ctx.textAlign = "center";
ctx.strokeText(TESTlength+" x "+ TESTlength/2,c.width/2,c.height/2);
}
</script> 
</body>

</html>

Спасибо.

...