window.print() 和 window.close() 函數 Safari IOS 關閉窗口，無需等待打印預覽

Question

在 IOS 的 Safari 中，打印和關閉 JavaScript 功能似乎不像其他瀏覽器那樣工作。 如果你單獨調用window.print()它似乎工作。 但是，如果您在之后立即調用window.close() ，它似乎關閉窗口並打印預覽，盡管打印預覽窗口仍然打開它不會等待打印預覽完成或取消以關閉窗口並且它只是立即關閉窗口打開。

我創建了一個用於打印表格的按鈕。 它在新窗口中打開表格並打開打印功能，並等待一些時間讓瀏覽器打開頁面並呈現表格。 打印完成后，它應該關閉窗口。

提示：如果您有 Mac 和 Xcode，您可以打開 iPhone 模擬器並通過啟動服務器python -m SimpleHTTPServer 8000使用 python 訪問本地主機。 要訪問模擬器打開 Xcode，然后 Xcode > Open Developer Tools > Simulator

這是代碼：

<!DOCTYPE html>
<html>
<head>
<style>
table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

td, th {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 8px;
}

tr:nth-child(even) {
  background-color: #dddddd;
}
</style>
</head>
<body>
<table class="table">
  <tr>
    <th>Company</th>
    <th>Contact</th>
    <th>Country</th>
  </tr>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Centro comercial Moctezuma</td>
    <td>Francisco Chang</td>
    <td>Mexico</td>
  </tr>
  <tr>
    <td>Ernst Handel</td>
    <td>Roland Mendel</td>
    <td>Austria</td>
  </tr>
  <tr>
    <td>Island Trading</td>
    <td>Helen Bennett</td>
    <td>UK</td>
  </tr>
  <tr>
    <td>Laughing Bacchus Winecellars</td>
    <td>Yoshi Tannamuri</td>
    <td>Canada</td>
  </tr>
  <tr>
    <td>Magazzini Alimentari Riuniti</td>
    <td>Giovanni Rovelli</td>
    <td>Italy</td>
  </tr>
</table>

<button onclick="myPrintFunction()">Click me</button>

<script>
  function myPrintFunction() {
    let divToPrint = document.getElementsByClassName("table")[0];
    if (typeof divToPrint !== 'undefined') {
      let newWin = window.open();
      newWin.document.write('<h1>PRINT FRIENDLY</h1>');
      newWin.document.write(divToPrint.outerHTML);
      newWin.document.close();
      newWin.focus();
      setTimeout(()=>{
        newWin.print();
        newWin.close();
      }, 1000);
    } else {
      alert('NO EVENTS TO PRINT!');
    }
  }
</script>

</body>
</html>

Answer 1

我避免使用 write() 因為它刪除了 DOM。 然后我添加了打印和關閉按鈕。 為了避免這些被渲染，我讓它們消失並在 10 秒后重新出現。

// detect Safari
if (navigator.userAgent.indexOf("Safari") !== -1) {
  // make print button
  const print_button = document.createElement('button');
  const print_button_text = document.createTextNode("Print");
  print_button.appendChild(print_button_text);
  print_button.addEventListener(
    "click",
    function() {
      // hide the buttons before printing
      print_button.style.display = 'none';
      close_button.style.display = 'none';
      newWindow.print();
      // delay reappearing of the buttons to prevent them from showing on the print
      setTimeout(() => {
        print_button.style.display = 'block';
        close_button.style.display = 'block';
      }, 10000);
    },
    false
  );
  // make close button
  const close_button = document.createElement('button');
  const close_button_text = document.createTextNode('Close');
  close_button.appendChild(close_button_text);
  close_button.addEventListener(
    "click",
    function() {
      newWindow.close();
    },
    false
  );
  newWindow.document.body.appendChild(print_button);
  newWindow.document.body.appendChild(close_button);
};

window.print() 和 window.close() 函數 Safari IOS 關閉窗口，無需等待打印預覽

問題描述

1 個解決方案

解決方案1
0 2020-07-08 16:21:42

window.print() 和 window.close() 函數 Safari IOS 關閉窗口，無需等待打印預覽

問題描述

1 個解決方案

解決方案1 0 2020-07-08 16:21:42

解決方案1
0 2020-07-08 16:21:42