Mencoba membuat jendela baru dengan informasi dari formulir yang dapat saya sesuaikan. Terjebak

Saya sedang mengerjakan situs web untuk teman dari seorang teman, dan hal terbesar yang membuat saya terjebak saat ini adalah formulir adopsi. Saya sudah menyelesaikan semua formulir, tetapi saya tidak bisa membuka informasi masukan di halaman baru. Layar cetak yang hanya memuat pertanyaan dan jawaban yang dimasukkan. Saya memiliki kode yang sangat sederhana yang berfungsi dengan baik. Itu muncul persis dengan apa yang ingin saya cetak. Masalahnya adalah saya tidak bisa menyesuaikannya dengan CSS. Saya menemukan cara lain untuk melakukannya dari pertanyaan bantuan di sini. Tetapi orang yang mengajukan pertanyaan ini tidak melakukan hal yang sama dengan saya, jadi itu hanya sangat membantu.

Ini adalah kode yang saya coba yang berfungsi dengan baik tetapi tidak dapat disesuaikan:

<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>

Ini adalah kode lain yang juga saya coba, tetapi tidak berfungsi sama sekali:

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="/idmystyle.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();
    };

Tidak ada yang terjadi setelah ini. Saya mengklik tombolnya dan sama sekali tidak terjadi apa-apa.

Lalu saya mencoba mengambil sedikit dari keduanya:

function printDiv(divName) {


var printContents = document.getElementById(divName).innerHTML;
var cssHead = '<head><link rel="stylesheet" type="text/css" href="/idmystyle.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();
}

Ini juga tidak berhasil. Mengklik tombol tidak terjadi apa-apa. Saya sangat bingung harus berbuat apa. Saya tahu beberapa JavaScript tetapi tidak banyak. Saya sedikit mengenalnya di sekolah. Tidak ada yang lebih maju. Saya sangat ingin menyelesaikan ini dan ini adalah salah satu hal terakhir sebelum selesai. Ada ide? Apa yang saya lakukan salah?


person Allison J Perry    schedule 14.08.2016    source sumber


Jawaban (2)


Jika pemahaman saya benar, ini mungkin membantu Anda

sertakan stylesheet dalam javascript pertama Anda dengan media="print".

lihat juga tautan ini, yang mungkin membantu Anda

Print/Preview Mengabaikan Print.css saya

person Ponnarasu    schedule 14.08.2016

function printDiv() {


var printContents = document.getElementById("myForm");
var cssHead = '<head><link rel="stylesheet" type="text/css" href="/idmystyle.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">

Itu tidak berhasil sama sekali, izinkan saya mencobanya lagi. Saya akan memposting input formulir yang ingin saya cetak, javascript yang saya gunakan dan acara tombol onClick. Saya juga sudah menyertakan css yang sudah mempengaruhi formulir. Saya mengklik tombol cetak yang seharusnya memicu acara onClick tetapi tidak terjadi apa-apa. Saya tidak dapat memahaminya. Telah terjebak selama berminggu-minggu.

Saya bahkan tidak bisa lagi menjalankan fungsinya, apalagi css mencoba menyesuaikannya.

person Allison J Perry    schedule 20.08.2016