Попытка создать форму, которая выдала бы окно печати, связанное с данными формы - PullRequest
Новая
       24

Попытка создать форму, которая выдала бы окно печати, связанное с данными формы

0 голосов
/ 14 марта 2020

Как подсказывает мой заголовок, я пытаюсь создать форму, которая бы принимала какие-то пользовательские данные, такие как имя, возраст, пол, хобби, контактные данные и фотография и т. Д. c. (в основном я думаю о создании простого локального html приложения, которое бы создавало RESUME ), и после ввода пользовательского ввода, предположительно, после нажатия на кнопку отправки, оно должно создать новое окно печати, где каждый введенные данные должны быть упорядочены в формате, подобном резюме, включая фотографию.

Это то, что я пытаюсь использовать для моей страницы ввода ... (ps: она неполная !!!, большая часть моей части сценария просто Ctrl + C & Ctrl + V ? 

<!DOCTYPE html>
  <html>
    <head>
      <title>Resume maker</title>
      </head>
      <body>
        <div id="BMain" class="body">
          <h1>Please enter your resume data!</h1>
            <form action="#">
              <p>Name</p>
                <input type"text" id="name" name="name">
              <p>Mother's name</p>
                <input type"text" id="mName" name="mName">
              <p>Father's name</p>
                <input type"text" id="fName" name="fName">
              <p>Gender</p>
                <input type="radio" id="male" name="gender" value="male">
                  <label for="male">Male</label><br>
                <input type="radio" id="female" name="gender" value="female">
                  <label for="female">Female</label><br>
              <div class="container" id"dobPick">
              <p>Date of Birth</p>
                <div class="row">
                  <div class='col-sm-6'>
                    <div class="form-group">
                      <div class='input-group date' id='datetimepicker3'>
                        <input type='text' class="form-control" />
                          <span class="input-group-addon">
                          <span class="glyphicon glyphicon-time"></span>
                          </span>
                      </div>
                   </div>
                </div>
               <script type="text/javascript">
              $(function () {
              $('#datetimepicker3').datetimepicker({
                    format: 'L'
                });
            });
               </script>
              </div>
             </div>
              <label for="myfile">Upload your photo:</label>
              <input type="file" id="myPic" name="myPic"><br><br>
              <input type="submit">
              </form>

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

Вот так должно выглядеть мое окно печати ... Окно печати

Любая помощь по этому поводу ..... На данном этапе сценарии выглядят слишком грязно, чтобы меня. Я взволнован, чтобы попробовать это в своем браузере.

Мой вопрос: как я могу это сделать, или, скорее, я говорю, что мне следует сделать или добавить на мою страницу ввода, чтобы получить желаемый результат, который я ожидаю? Мой код выше был просто концептуальным примером.

1 Ответ

0 голосов
/ 15 марта 2020

Самый простой способ сделать это - добавить второй элемент div на страницу за пределами вашей формы. После проверки и отправки формы она может быть скрыта, а вторая div может быть заполнена этой информацией. После этого вы можете использовать CSS медиазапросы (есть заданные для печати c запросы) и запускать метод print() в Javascript. Вам нужно будет включить в ваш файл html следующее:

<link rel = "stylesheet" type = "text/css" media = "print" href = "mystyle.css">

Затем, если ваша разметка будет выглядеть следующим образом: 

<div id="resumeform">
  <input id="name" type="text" />
  <input id="age" type="text" />
  <input id="address" type="text" />
  <input id="height" type="text" />
  <input id="btnSubmit" type="button" value="Submit Info"/>
</div>
<div id="result">
  <span id="r_name"></span>
  <span id="r_age"></span>
  <span id="r_address"></span>
  <span id="r_height"></span>
</div>

Ваш JS может выглядеть так: 

var btn = document.getElementById("btnSubmit");
btn.addEventListener("click", btnHandler);

function btnHandler(el){
  var resumeform = document.getElementById("resumeform");
  var result = document.getElementById("result");

  var name = document.getElementById("name");
  var age = document.getElementById("age");
  var address = document.getElementById("address");
  var height = document.getElementById("height");

  var r_name = document.getElementById("r_name");
  var r_age = document.getElementById("r_age");
  var r_address = document.getElementById("r_address");
  var r_height = document.getElementById("r_height");

  r_name.innerHTML = name.value;
  r_age.innerHTML = age.value;
  r_address.innerHTML = address.value;
  r_height.innerHTML = height.value;

  resumeform.style.display = "none";
  result.style.display = "block";
  window.print();
}

А ваш CSS может выглядеть так: 

#resumeform {
  display: block;
}
#result {
  display: none;
}

input {
  width: 200px;
  display: block;
  margin: 10px;
}

@media print {
  span {
      /* Your CSS rules would go here */
  }
}

Рабочая скрипка: https://jsfiddle.net/9apfwjxz/

...