Question

我正在使用打印元素功能在SPA中打印出一个视图。当视图更改时，函数运行并抓取视图。但是，如果用户更改了页面上的内容，则不会更新，当您尝试打印时，您将获得与首次加载页面时相同的视图。这是我使用的功能：

var printElement = function (elem, append, delimiter) {
    var domClone = elem.cloneNode(true);
    var $printSection = document.getElementById("printSection");

    if (!$printSection) {
        $printSection = document.createElement("div");
        $printSection.id = "printSection";
        document.body.appendChild($printSection);
    }

    if (append !== true) {
        $printSection.innerHTML = "";
    }

    else if (append === true) {
        if (typeof (delimiter) === "string") {
            $printSection.innerHTML += delimiter;
        }
        else if (typeof (delimiter) === "object") {
            $printSection.appendChlid(delimiter);
        }
    }
    $printSection.appendChild(domClone);
};

我的问题是，当有人使用浏览器打印功能时，我可以触发此功能，例如Ctrl+P，这样当他们去打印页面时，它会被更新吗？

Answer 1

您可以使用默认的javascript事件。既然你提到你正在使用jQuery：

$(document).bind("keydown keyup", function(e){
    if(event.ctrlKey && event.keyCode == 80){
        // CTRL+P was pressed.
    }
});

Answer 2

我找到了解决问题的方法，有关堆栈溢出detect print的另一个问题回答了这个问题。这就是我所做的：

var beforePrint = function () { printElement(document.getElementById("print")); }; var mediaQueryList = window.matchMedia('print'); mediaQueryList.addListener(function (mql) { if (mql.matches) { printElement(document.getElementById("print")); } }); printElement(document.getElementById("print")); window.onbeforeprint = beforePrint;

这包括IE，Chrome，Firefox和Safari。 beforePrint适用于IE和Firefox，matchMedia适用于Safari和Chrome。

有没有办法在用户尝试以角度打印时触发功能？

2 个答案: