gpt4 book ai didi

javascript - 单击打印按钮时获取jsp页面的确切布局

转载 作者:行者123 更新时间:2023-11-28 03:58:45 25 4
gpt4 key购买 nike

我的 jsp 页面中有一个必须打印的 div。单击打印按钮时,除了布局设计(无法打印准确的样式)外,一切正常。谷歌搜索后我知道这是因为 CSS 链接,需要明确添加。当我添加相同的内容时,我的 Bootstrap 链接似乎不起作用。谁能建议最好的解决方案。以下是我的代码:需要打印的div预览:

enter image description here

点击打印按钮时执行的代码是:

function printReceipt(){
console.log("Printing the receipt");

var contents = $("#receipt").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></title>');
frameDoc.document.write('<link type="text/css" rel="stylesheet" href="<spring:url value="/resources/css/bootstrap.min.css" />">');
frameDoc.document.write('<link type="text/css" rel="stylesheet" href="<spring:url value="/resources/css/hmsCss.css" />">');

frameDoc.document.write('</head><body>');

//Append the DIV contents.
frameDoc.document.write(contents);
frameDoc.document.write('<script type="text/javascript" src="<spring:url value="/resources/js/jquery.min.js"/>"><\/script>');
frameDoc.document.write('<script type="text/javascript" src="<spring:url value="/resources/js/bootstrap.min.js"/>"><\/script>');
frameDoc.document.write('</body></html>');
frameDoc.document.close();
setTimeout(function () {
window.frames["frame1"].focus();
window.frames["frame1"].print();
frame1.remove();
}, 500);
}

我打印的收据格式: enter image description here

已更改打印收据页眉的布局。我怎样才能使它与预览格式完全一样。任何建议都将不胜感激。

最佳答案

尝试如下:

<spring:url value="/resources/css/bootstrap.min.css" var="bsmin" />
...
<script>
function printReceipt(){
...
frameDoc.document.write('<link type="text/css" rel="stylesheet" href="${bsmin}">');
...
}

关于javascript - 单击打印按钮时获取jsp页面的确切布局,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43316010/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com