CSS не работает при проверке предварительного просмотра

1) У меня есть форма, и я показываю предварительный просмотр этой формы на следующей вкладке. Я установил немного CSS, но после нажатия на кнопку предварительного просмотра CSS не отражается на полях.

2) Есть ли другой способ отобразить вкладку в новой вкладке, установленной в открывшемся окне?

/*form preview*/
function PrintPreview() {
  var toPrint = document.getElementById('from_privew');
  var popupWin = window.open('', '_blank', 'width=1000,height=1000,location=no,left=200px');
  popupWin.document.open();
  popupWin.document.write('<html><title>::Print Preview::</title><link rel="stylesheet" type="text/css" href="Print.css" media="screen"/></head><body>')
  popupWin.document.write(toPrint.innerHTML);
  popupWin.document.write('</div></body></html>');
  popupWin.document.close();
}
@media print{
    input[type="text"],
    input[type="email"] {
      border: 1px solid #000;
      padding: 05px;
      border-radius: 05px;
    }

    input[type="submit"],
    a {
      background: #0088cc;
      border: none;
      border-radius: 05px;
      padding: 08px 25px;
      color: #fff;
    }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<div id="from_privew">
  <form>
    <input type="text" name="name">
    <input type="email" name="email">
    <input type="submit" name="submit">
    <a href="#" onclick="PrintPreview()">Preview</a>
  </form>
</div>

1 ответ

Решение

Поместите свой CSS в отдельный файл Print.css и удалите @media print:

input[type="text"],
input[type="email"] {
    border: 1px solid #000;
    padding: 05px;
    border-radius: 05px;
}

input[type="submit"],
a {
    background: #0088cc;
    border: none;
    border-radius: 05px;
    padding: 08px 25px;
    color: #fff;
}

Затем измените ваш JavaScript, чтобы включить ссылку на этот файл:

function PrintPreview() {
    var toPrint = document.getElementById('from_privew');
    var popupWin = window.open('', '_blank', 'width=1000,height=1000,location=no,left=200px');
    popupWin.document.open();
    popupWin.document.write('\
        <html> \
            <head> \
                <title>::Print Preview::</title> \
                <link rel="stylesheet" type="text/css" href="Print.css" media="screen"/> \
                <link rel="stylesheet" type="text/css" href="style.css" media="screen"> \
            </head> \
            <body> \
                <div>')
    popupWin.document.write(toPrint.innerHTML);
    popupWin.document.write('\
                </div> \
            </body> \
        </html>');
    popupWin.document.close();
}

Что касается второй части, будет ли страница открыта в новом окне или новой вкладке, зависит от браузера (или настроек браузера). Поэтому я думаю, что вы ничего не можете с этим поделать.

Другие вопросы по тегам