window.print()无法在SharePoint 2013页面中运行

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了window.print()无法在SharePoint 2013页面中运行相关的知识,希望对你有一定的参考价值。

我对这些事情还很陌生,我已经找到了答案,但找不到任何答案。

我在SharePoint 2013上创建了一个页面,用于生成ICE(紧急情况下)卡片。下面的代码单独工作,即作为SP之外的单独html文件,但当我将其粘贴到脚本编辑器Web部件(也尝试CEWP)时,打印窗口根本无法打开。 generateCard函数没有问题,但printCard没有 - 打印对话框永远不会弹出。

你知道我做错了什么吗?

HTML:

<html>
    <h1>ICE Card Generator</h1>
    <p>Enter your details in the form below and click <em>Generate card</em>. After your card has been generated, you can print it.</p>
<form>
    Your name:<input type="text" id="name">
    <br>Your phone number:<input type="text" id="phone">
    <br>Blood type: <input type="text" id="blood">
    <br>Emergency contact name:<input type="text" id="emergencyName">
    <br>Emergency contact's phone number: <input type="text" id="emergencyPhone">
</form>
<br>
<button type="button" onclick="generateCard()">Generate card</button><br>
<br>
<div id="card">
  <h1 id="card_my_details">Card holder</h1>
  <p>Name: <span id="cardName">/</span>
  <p>Email: <span id="cardPhone">/</span>
  <p>Blood type: <span id="cardBlood">/</span>
  <h1 id="card_emergency_contacts">Emergency contacts</h1></span>
  <p>Emergency contact: <span id="cardEmergencyName">/</span>
  <p>Emergency contact's phone number: <span id="cardEmergencyPhone">/</span>
  </div>
<br>
<button type="button" click="printCard()">Print card</button>
<script type="text/javascript" src="/assets/ice_script.js">
</html>

使用Javascript:

function generateCard() {
    document.getElementById('cardName').innerHTML =
                document.getElementById("name").value;

    document.getElementById('cardPhone').innerHTML =
                document.getElementById("phone").value;

    document.getElementById('cardBlood').innerHTML =
                document.getElementById("blood").value;

    document.getElementById('cardEmergencyName').innerHTML =
                document.getElementById("emergencyName").value;

    document.getElementById('cardEmergencyPhone').innerHTML =
                document.getElementById("emergencyPhone").value;

    }


    function printCard() {
      var thisWillBePrinted = document.getElementById("card").innerHTML;
      var everythingOnPage = document.body.innerHTML;

      document.body.innerHTML = thisWillBePrinted;
      window.print();
      document.body.innerHTML = everythingOnPage;

    }

还有一些CSS,但我认为它与手头的问题有关 - 如何让Print对话框出现?它不适用于任何浏览器。

非常感谢!

答案

处理点击事件的正确属性名称是onclick而不是click

你应该改变

<button type="button" click="printCard()">Print card</button>

<button type="button" onclick="printCard()">Print card</button>

笔记

您可能希望使用addEventListener()方法替换内联事件处理程序以提高可读性。

<button type="button" id="printButton">Print card</button>

document.getElementById("printButton").addEventListener('click', function () {
    printCard();
}

Onclick Reference (MDN)

以上是关于window.print()无法在SharePoint 2013页面中运行的主要内容,如果未能解决你的问题,请参考以下文章

window.print()实现局部打印功能

window.print()实现局部打印功能

从 window.print() 中删除页眉和页脚

window.print()打印页面指定内容(使用iframe保证原页面不失效)

window.print() 在 IE\Firefox 中不显示相同的打印屏幕 HTML

为啥 window.print 给出重复页面?