Распечатать расчетный лист (интерактивная форма) в IE 11 с JavaScript

Question

У меня есть разные интерактивные формы, и я ищу чистое решение на JavaScript для распечатки раздела страницы по клику. Таким образом, на каждой странице будет кнопка «Нажмите, чтобы распечатать», и она должна открыть новую страницу, готовую к печати. Я пробовал много решений, и некоторые из них отлично работают, кроме IE11.

Некоторые из моих форм сложны, но для простоты вот простой пример кода, который я пытаюсь использовать:

<div id='DivIdToPrint'>
<p>This is a sample text for printing purpose.</p>

  First name: <input type="text" name="firstname" value=""><br>
  Last name: <input type="text" name="lastname" value=""><br><br>
  Gender: <br />
  <input type="radio" name="gender" value="male"> Male<br>
  <input type="radio" name="gender" value="female"> Female<br>
  <input type="radio" name="gender" value="other"> Other<br><br>
  </div> 

<input type='button' id='btn' value='Print' onclick='printDiv();'>

<script type="text/javascript">
function printDiv() {
   var divToPrint = document.getElementById('DivIdToPrint').innerHTML;
   var newWin = window.open();
   newWin.document.write(divToPrint);
   newWin.print();
   newWin.close();
}
</script>

Две проблемы: 1. Я не могу распечатать значение каждого элемента формы и 2. Это решение не работает в IE11.

Может ли кто-нибудь помочь с этим, пожалуйста?

Answer 1

1. Заполнение формы не изменяет html-разметку и не меняет атрибут value в реальной разметке. Таким образом, вы не можете получить значение с .innerHTML. Если вам нужен html с новым значением, просто установите для атрибута новое значение.
2. Чтобы убедиться, что вывод сценария действительно отображается в другом окне, мы должны использовать document.close() после записи содержимого.

Вы можете проверить мою демонстрацию, она может хорошо работать в IE и других браузерах:

<div id='DivIdToPrint'>
    <p>This is a sample text for printing purpose.</p>
    First name: <input type="text" name="firstname" value=""><br>
    Last name: <input type="text" name="lastname" value=""><br><br>
    Gender: <br />
    <input type="radio" name="gender" value="male"> Male<br>
    <input type="radio" name="gender" value="female"> Female<br>
    <input type="radio" name="gender" value="other"> Other<br><br>
    <input type="radio" name="aa" value="a"> A<br>
    <input type="radio" name="aa" value="b"> B<br>
    <input type="radio" name="aa" value="c"> C<br><br>
</div>
<input type='button' id='btn' value='Print' onclick='printDiv();'>

<script type="text/javascript">
    function printDiv() {
        //Set attribute to new value
        var inputs, index;
        inputs = document.getElementsByTagName('input');
        for (index = 0; index < inputs.length - 1; ++index) {
            var fieldValue = inputs[index].value;
            inputs[index].setAttribute('value', fieldValue);               
        }
        var radios, i;
        radios = document.querySelectorAll('input[type="radio"]:checked');
        for (i = 0; i < radios.length; i++) {
            radios[i].setAttribute('checked', true);
        }
        var divToPrint = document.getElementById('DivIdToPrint').innerHTML;
        var newWin = window.open();
        newWin.document.write(divToPrint);
        newWin.document.close(); //Close after writing content
        newWin.focus();
        newWin.print();
        newWin.close();
    }
</script>