Попытка создать новое окно с информацией из формы, которую я могу настроить. Застрявший

Я работаю над веб-сайтом для друга друга, и самая большая вещь, на которой я сейчас застрял, — это форма усыновления. У меня есть форма, все сказано и сделано, но я не могу заставить вводную информацию открываться на новой странице. Так сказать, экран печати, который включает только вопросы и введенные ответы. У меня был очень простой код, который работал нормально. Выскочило именно то, что я хотел напечатать. Проблема в том, что я не мог настроить его с помощью CSS. Я нашел другой способ сделать это из справочного вопроса здесь. Но этот человек, который задал вопрос, не делает то же самое, что и я, поэтому это очень помогает.

Это код, который я пробовал, работал нормально, но не настраивался:

<script type="text/javascript">

function printDiv(divName) {
 alert('s');
 var printContents = document.getElementById(divName).innerHTML;
 w=window.open();
 w.document.write(printContents);
 w.print();
 w.close();
}
For specific area of a page
<div id="print-content">
 <form>

  <input type="button" onclick="printDiv('print-content')" value="print a div!"/>
</form>
</div>

Это еще один код, который я также пробовал, но он вообще не работал:

function printPage(){
        var width = screen.width - 50;
        var tableData = '<table width="'+width+'" border="1">'+document.getElementsByTagName('table')[0].innerHTML+'</table>';

        var cssHead = '<head><link rel="stylesheet" type="text/css" href="mystyle.css"></head>'

        var data = cssHead + '<button onclick="window.print()">Print this page</button>'+tableData;     
        myWindow=window.open('','','width=auto,height=auto');
        myWindow.innerWidth = screen.width;
        myWindow.innerHeight = screen.height;
        myWindow.screenX = 0;
        myWindow.screenY = 0;
        myWindow.document.write(data);
        myWindow.focus();
    };

После этого ничего не произошло. Я нажал кнопку и абсолютно ничего не произошло.

Затем я попытался взять немного обоих:

function printDiv(divName) {


var printContents = document.getElementById(divName).innerHTML;
var cssHead = '<head><link rel="stylesheet" type="text/css" href="mystyle.css"></head>'


var data = cssHead + printContents;

 myWindow=window.open('','','width=auto,height=auto');
        myWindow.innerWidth = screen.width;
        myWindow.innerHeight = screen.height;
        myWindow.screenX = 0;
        myWindow.screenY = 0;
        myWindow.document.write(data);
        myWindow.focus();
	myWIndow.close();
}

Это тоже не сработало. Нажал кнопку ничего не произошло. Я в ужасной потере для того, что делать. Я немного знаю JavaScript, но не очень много. Я немного познакомился с ним в школе. Ничего продвинутого. Я действительно хочу, чтобы это было сделано, и это одна из последних вещей, прежде чем она будет закончена. Любые идеи? Что я делаю не так?


person Allison J Perry    schedule 14.08.2016    source источник


Ответы (2)


Если я правильно понимаю, это может помочь вам

включите таблицу стилей в свой первый javascript с помощью media="print".

также см. эту ссылку, которая может вам помочь

Печать/предварительный просмотр с игнорированием моего Print.css

person Ponnarasu    schedule 14.08.2016

function printDiv() {


var printContents = document.getElementById("myForm");
var cssHead = '<head><link rel="stylesheet" type="text/css" href="mystyle.css"></head>'


var data = cssHead +printContents;

 myWindow=window.open('','','width=auto,height=auto');
        myWindow.innerWidth = screen.width;
        myWindow.innerHeight = screen.height;
        myWindow.screenX = 0;
        myWindow.screenY = 0;
        myWindow.document.write(data);
        myWindow.focus();
        myWindow.close();
}
</script>
.form-style-1 {
     
     margin:10px auto;
     max-width: 1100px;
     padding: 20px 12px 10px 20px;

     background-color: #ccebff;
}
.form-style-1 li {
     padding: 5px;
     display: block;
     list-style: none;
     margin: 5px 0px 0px 0px;
     background-color: transparent;
}
.form-style-1 label{
     margin:0 0 3px 0;
     padding:0px;
     display:block;
     font-weight: bold;
     color: #4db8ff;
     
}
.form-style-1 input[type=text], 
.form-style-1 input[type=date],
.form-style-1 input[type=datetime],
.form-style-1 input[type=number],
.form-style-1 input[type=search],
.form-style-1 input[type=time],
.form-style-1 input[type=url],
.form-style-1 input[type=email],
 textarea, 
 select{
     box-sizing: border-box;
     -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
     border:1px solid #BEBEBE;
     padding: 7px;
     margin:0px;
     -webkit-transition: all 0.30s ease-in-out;
     -moz-transition: all 0.30s ease-in-out;
     -ms-transition: all 0.30s ease-in-out;
     -o-transition: all 0.30s ease-in-out;
     outline: none;  
}
.form-style-1 input[type=text]:focus, 
.form-style-1 input[type=date]:focus,
.form-style-1 input[type=datetime]:focus,
.form-style-1 input[type=number]:focus,
.form-style-1 input[type=search]:focus,
.form-style-1 input[type=time]:focus,
.form-style-1 input[type=url]:focus,
.form-style-1 input[type=email]:focus,
.form-style-1 textarea:focus, 
.form-style-1 select:focus{
     -moz-box-shadow: 0 0 8px #88D5E9;
     -webkit-box-shadow: 0 0 8px #88D5E9;
     box-shadow: 0 0 8px #88D5E9;
     border: 1px solid #88D5E9;
}
.form-style-1 .field-divided{
     width: 20%;
}

.form-style-1 .field-divided2{
     width: 152px;
}

.form-style-1 .field-long{
     width: 20%;
}
.form-style-1 .field-select{
     width: 8%;
}

.form-style-1 .field-select2{
     width: 100px;
}

.form-style-1 .field-textarea{
     height: 80px;
}
.form-style-1 input[type=submit], .form-style-1 input[type=button]{
     background: #4B99AD;
     padding: 8px 15px 8px 15px;
     border: none;
     color: #fff;
}
.form-style-1 input[type=submit]:hover, .form-style-1 input[type=button]:hover{
     background: #4691A4;
     box-shadow:none;
     -moz-box-shadow:none;
     -webkit-box-shadow:none;
}
.form-style-1 .required{
     color:red;
}
<div id="frminfo">
<form method="post" id="myform" enctype="text/plain"> 
<ul class="form-style-1">

Это не сработало, позвольте мне попробовать это снова. Я собираюсь опубликовать ввод формы, который я хочу распечатать, javascript, который я использую, и событие кнопки onClick. Я также включил css, уже влияющий на форму. Я нажимаю кнопку печати, которая должна вызвать событие onClick, но ничего не происходит. Я не могу понять это. Застряли на несколько недель.

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

person Allison J Perry    schedule 20.08.2016