HTML-CSS样式未应用于我试图使用JavaScript-Stack Overflow打印的页面

顺晟科技

2022-10-19 12:19:36

167

我试图用一个名为“容器”的类打印特定div的内容，该类有许多具有各自类的div。我面临的问题是，当我单击打印按钮时，打印预览显示要以完全纯格式打印的内容，没有应用css样式。但我希望内容与浏览器中显示的方式完全一致。我从这里尝试了许多方法和解决方案，但似乎都不起作用。请建议我做这件事的方法。我试着用JavaScript做这件事。下面给出的javascript代码是cpied，正如我所说的，我正在尝试所有可能的方法。

JavaScript

$(function () {
    $("#btnPrint").click(function () {
        var contents = $("#content").html();
        var frame1 = $('<iframe />');
        frame1[0].name = "frame1";
        frame1.css({ "position": "absolute", "top": "-1000000px" });
        $("body").append(frame1);
        var frameDoc = frame1[0].contentWindow ? frame1[0].contentWindow : frame1[0].contentDocument.document ? frame1[0].contentDocument.document : frame1[0].contentDocument;
        frameDoc.document.open();
        //Create a new HTML document.
        frameDoc.document.write('<html><head><title>DIV Contents</title>');
        frameDoc.document.write('</head><body>');
        //Append the external CSS file.
        frameDoc.document.write('<link href="C:\Users\Intel\Envs\test\project\static\doc.css" rel="stylesheet" type="text/css" />');
        //Append the DIV contents.
        frameDoc.document.write(contents);
        frameDoc.document.write('</body></html>');
        frameDoc.document.close();
        setTimeout(function () {
            window.frames["frame1"].focus();
            window.frames["frame1"].print();
            frame1.remove();
        }, 500);
    });
});

以下图像是它在浏览器中的显示方式和在预览中的显示方式

这就是我想让它打印的方式

这就是打印它的方式]2

HTML文件

$(function () {
    $("#btnPrint").click(function () {
        var contents = $("#content").html();
        var frame1 = $('<iframe />');
        frame1[0].name = "frame1";
        frame1.css({ "position": "absolute", "top": "-1000000px" });
        $("body").append(frame1);
        var frameDoc = frame1[0].contentWindow ? frame1[0].contentWindow : frame1[0].contentDocument.document ? frame1[0].contentDocument.document : frame1[0].contentDocument;
        frameDoc.document.open();
        //Create a new HTML document.
        frameDoc.document.write('<html><head><title>DIV Contents</title>');
        frameDoc.document.write('</head><body>');
        //Append the external CSS file.
        frameDoc.document.write('<link href="C:\Users\Intel\Envs\test\project\static\doc.css" rel="stylesheet" type="text/css" />');
        //Append the DIV contents.
        frameDoc.document.write(contents);
        frameDoc.document.write('</body></html>');
        frameDoc.document.close();
        setTimeout(function () {
            window.frames["frame1"].focus();
            window.frames["frame1"].print();
            frame1.remove();
        }, 500);
    });
});

顺晟科技：

请考虑以下示例：https://jsfiddle.net/twisty/aspehr0m/7/

JavaScript

$(function () {
    $("#btnPrint").click(function () {
        var contents = $("#content").html();
        var frame1 = $('<iframe />');
        frame1[0].name = "frame1";
        frame1.css({ "position": "absolute", "top": "-1000000px" });
        $("body").append(frame1);
        var frameDoc = frame1[0].contentWindow ? frame1[0].contentWindow : frame1[0].contentDocument.document ? frame1[0].contentDocument.document : frame1[0].contentDocument;
        frameDoc.document.open();
        //Create a new HTML document.
        frameDoc.document.write('<html><head><title>DIV Contents</title>');
        frameDoc.document.write('</head><body>');
        //Append the external CSS file.
        frameDoc.document.write('<link href="C:\Users\Intel\Envs\test\project\static\doc.css" rel="stylesheet" type="text/css" />');
        //Append the DIV contents.
        frameDoc.document.write(contents);
        frameDoc.document.write('</body></html>');
        frameDoc.document.close();
        setTimeout(function () {
            window.frames["frame1"].focus();
            window.frames["frame1"].print();
            frame1.remove();
        }, 500);
    });
});

您可以在此创建现有样式表链接的副本。这将确保它使用与主页相同的页面。

最好的做法是不要混合使用JavaScript和jQuery，而是坚持使用其中一种。在本例中，使用本机JavaScript管理iFrame元素要容易一些。

更新

您可以考虑创建一个新函数:https://jsfiddle.net/twisty/aspehr0m/38/

JavaScript

$(function () {
    $("#btnPrint").click(function () {
        var contents = $("#content").html();
        var frame1 = $('<iframe />');
        frame1[0].name = "frame1";
        frame1.css({ "position": "absolute", "top": "-1000000px" });
        $("body").append(frame1);
        var frameDoc = frame1[0].contentWindow ? frame1[0].contentWindow : frame1[0].contentDocument.document ? frame1[0].contentDocument.document : frame1[0].contentDocument;
        frameDoc.document.open();
        //Create a new HTML document.
        frameDoc.document.write('<html><head><title>DIV Contents</title>');
        frameDoc.document.write('</head><body>');
        //Append the external CSS file.
        frameDoc.document.write('<link href="C:\Users\Intel\Envs\test\project\static\doc.css" rel="stylesheet" type="text/css" />');
        //Append the DIV contents.
        frameDoc.document.write(contents);
        frameDoc.document.write('</body></html>');
        frameDoc.document.close();
        setTimeout(function () {
            window.frames["frame1"].focus();
            window.frames["frame1"].print();
            frame1.remove();
        }, 500);
    });
});

使用URL或可访问路径，而不是:

顺便说一句，javascript似乎没问题，如果拼写错误，页面不会显示内容

上一篇：希望两个图像并排使用不同的超链接ht 下一篇：html-为什么position“s

网站建设

Html

HTML-CSS样式未应用于我试图使用JavaScript-Stack Overflow打印的页面