Печать части веб-страницы без потери всех стилей? - PullRequest
Новая
       4

Печать части веб-страницы без потери всех стилей?

0 голосов
/ 26 мая 2020

Я распечатываю часть своей страницы из своего MVC приложения со следующим кодом javascript: 

function PrintElem(elem) {
  Popup($(elem).html());
}

function Popup(data) {
  var mywindow = window.open("", "divprint", "height=400,width=600");
  mywindow.document.write("<html><head><title></title>");

  /*optional stylesheet*/
  // mywindow.document.write('<link rel="stylesheet" href="main.css" type="text/css" />'); 

  mywindow.document.write("</head><body >");
  mywindow.document.write(data);
  mywindow.document.write("</body></html>");
  cloneLinksAndStyle(window, newWindow);
  mywindow.document.close(); // necessary for IE >= 10
  mywindow.focus(); // necessary for IE >= 10

  mywindow.print();
  mywindow.close();

  return true;
}

HTML: 

@model IEnumerable <AljawdahNewSite.Models.Orders_Tables>
  @{
   ViewBag.Title = "MasterDetails";
    Layout = "~/Views/Shared/_LayoutPatients.cshtml";
  }

  <h2>Order Result - نتائج التحاليل </h2>
  <table class="table table-bordered">
    <tr>
      <td style="text-align:center">
        <input type="submit" value="Print Result - طباعة النتيجة"
               onclick="PrintElem('#divprint')" class="btn btn-danger"/>
      </td>
    </tr>
  </table>
  <div id="divprint">
    <div style="margin-left:15px">
      <hr/>
      <dl class="horizontal">
        <dt style="width: 20%;display: inline-block;">@Html.DisplayNameFor(model
          => model.labViewResult.Patient_Name)
        </dt>
        <dd
          style="width: 25%;display: inline-block;margin: 0px;margin-left:-50px">
          @Html.DisplayFor(model =>
          model.FirstOrDefault().labViewResult.Patient_Name)
        </dd>
        <dt style="width: 22%;display: inline-block;">@Html.DisplayNameFor(model
          => model.labViewResult.Customer_Name)
        </dt>
        <dd
          style="width: 25%;display: inline-block;margin: 0px;margin-left:0px">
          @Html.DisplayFor(model =>
          model.FirstOrDefault().labViewResult.Customer_Name)
        </dd>
        <dt style="width: 20%;display: inline-block;">@Html.DisplayNameFor(model
          => model.labViewResult.Patient_No)
        </dt>
        <dd
          style="width: 25%;display: inline-block;margin: 0px;margin-left:-50px">
          @Html.DisplayFor(model =>
          model.FirstOrDefault().labViewResult.Patient_No)
        </dd>
        <dt style="width: 22%;display: inline-block;">@Html.DisplayNameFor(model
          => model.labViewResult.Clinic_File_No)
        </dt>
        <dd
          style="width: 20%;display: inline-block;margin: 0px;margin-left:0px">
          @Html.DisplayFor(model =>
          model.FirstOrDefault().labViewResult.Clinic_File_No)
        </dd>
        <dt style="width: 20%;display: inline-block;">@Html.DisplayNameFor(model
          => model.labViewResult.SEX)
        </dt>
        <dd
          style="width: 20%;display: inline-block;margin: 0px;margin-left:-50px">
          @Html.DisplayFor(model => model.FirstOrDefault().labViewResult.SEX)
        </dd>
        <dt style="width: 22%;display: inline-block;margin-left:60px">
          @Html.DisplayNameFor(model => model.labViewResult.Collection_Date)
        </dt>
        <dd
          style="width: 25%;display: inline-block;margin: 0px;margin-left:0px">
          @Html.DisplayFor(model =>
          model.FirstOrDefault().labViewResult.Collection_Date)
        </dd>
        <dt style="width: 20%;display: inline-block;">@Html.DisplayNameFor(model
          => model.labViewResult.AGE)
        </dt>
        <dd
          style="width: 20%;display: inline-block;margin: 0px;margin-left:-50px">
          @Html.DisplayFor(model => model.FirstOrDefault().labViewResult.AGE)
        </dd>
        <dt style="width: 22%;display: inline-block;margin-left:60px">
          @Html.DisplayNameFor(model => model.labViewResult.Receiving_Date)
        </dt>
        <dd
          style="width: 25%;display: inline-block;margin: 0px;margin-left:0px">
          @Html.DisplayFor(model =>
          model.FirstOrDefault().labViewResult.Receiving_Date)
        </dd>
        <dt style="width: 20%;display: inline-block;">@Html.DisplayNameFor(model
          => model.labViewResult.order_number)
        </dt>
        <dd
          style="width: 25%;display: inline-block;margin: 0px;margin-left:-50px">
          @Html.DisplayFor(model =>
          model.FirstOrDefault().labViewResult.order_number)
        </dd>

        <dt style="width: 22%;display: inline-block;">@Html.DisplayNameFor(model
          => model.labViewResult.Report_Date)
        </dt>
        <dd
          style="width: 25%;display: inline-block;margin: 0px;margin-left:0px">
          @Html.DisplayFor(model =>
          model.FirstOrDefault().labViewResult.Report_Date)
        </dd>


      </dl>
    </div>

    <div style="align-content:center">
      <table class="table table-bordered">
        <tr>

          <td> test name</td>
          <td> result</td>
          <td> From Range</td>
          <td> To Range</td>
          <td> Other Range</td>
          <td> Report Date</td>


        </tr>

        @foreach (var item in Model)
        {
        <tr>

          <td>@item.labViewResult.Test_Name</td>
          <td>@item.labViewResult.Result</td>
          <td>@item.labViewResult.Low_Range</td>
          <td>@item.labViewResult.High_Range</td>
          <td style="width:20%">@item.labViewResult.Text_Range</td>
          <td>@item.labViewResult.Report_Date</td>


        </tr>
        }
      </table>

      <link href="~/Contents/css/style.css" rel="stylesheet"/>
    </div>
  </div>

Моя проблема в том, что когда я печатаю с использованием javascript, бумага печатается без какого-либо стиля. Как мне добавить стиль к моей распечатке?

Это текущая распечатка.

(JavaScript я новичок)

enter image description here

Это файлы CSS, которые я связал в общем макете: 

<link
  href="https://fonts.googleapis.com/css?family=Oswald:400,700|Work+Sans:300,400,700"
  rel="stylesheet">
<link rel="stylesheet" href=@Url.Content("/Contents/fonts/icomoon/style.css")>
<link rel="stylesheet" href=@Url.Content("/Contents/css/bootstrap.min.css")>
<link rel="stylesheet" href=@Url.Content("/Contents/css/magnific-popup.css")>
<link rel="stylesheet" href=@Url.Content("/Contents/css/jquery-ui.css")>
<link rel="stylesheet" href=@Url.Content("/Contents/css/owl.carousel.min.css")>
<link rel="stylesheet"
      href=@Url.Content("/Contents/css/owl.theme.default.min.css")>
<link rel="stylesheet"
      href=@Url.Content("/Contents/css/bootstrap-datepicker.css")>
<link rel="stylesheet" href=@Url.Content("/Contents/css/animate.css")>

<link rel="stylesheet"
      href=@Url.Content("/Contents/fonts/flaticon/font/flaticon.css")>

<link rel="stylesheet" href=@Url.Content("/Contents/css/aos.css")>
<link rel="stylesheet" href=@Url.Content("/Contents/css/style.css")>

1 Ответ

1 голос
/ 26 мая 2020

Я предполагаю, что у вас есть стиль на странице браузера, который вы хотите сохранить при распечатке.

Чтобы сохранить те же стили в новом окне, вы можете скопировать link и * исходного окна 1004 * элементов в новое окно.

Эта функция скопирует все элементы link и style из одного окна в другое: 

function cloneLinksAndStyles (win, newWin) {
  const newHead = newWin.document.head;

  const links = Array.from(win.document.getElementsByTagName("LINK"));
  links.forEach(link => {
    let newLink = newWin.document.createElement('link');
    newLink.rel = 'stylesheet';
    newLink.href = link.href;
    newHead.appendChild(newLink);
  });

  const styles = Array.from(win.document.getElementsByTagName('STYLE'));
  styles.forEach(style => {
    let newStyle = newWin.document.createElement('style');
    newStyle.innerHTML = style.innerHTML;
    newHead.appendChild(newStyle);
  });
}

Затем в вашем скрипте: 

function Popup(data) {
  ...
  cloneLinksAndStyle(window, newWindow);
  ...
}

Вот jsfiddle , чтобы показать, как это работает.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...