win.document.write( `<iframe src="${url}" style="width: 100%; height: 100%; " onload="window.print(); window.close();"></iframe>`, );
时间: 2024-04-10 11:32:16 浏览: 64
这段代码是在当前页面中使用`document.write()`方法来动态创建一个包含指定URL的iframe元素,并设置其样式为宽度和高度都为100%。同时,使用`onload`事件来在iframe加载完成后执行打印和关闭窗口的操作。
这段代码的作用是将指定URL的内容加载到iframe中,并在加载完成后自动触发打印和关闭窗口的操作,实现打印预览的功能。
请注意,由于安全策略的限制,这段代码只能在用户主动触发事件(如点击按钮)时执行,否则可能会被浏览器拦截或报错。另外,该代码可能会导致弹出窗口被浏览器拦截,需要用户手动允许弹出窗口才能正常使用。
如果你有具体的问题或需要进一步的帮助,请提供更多上下文信息。
相关问题
const print = () => { if (!baseInfo.orderCode) { message.error("打印正在准备,请5秒后再点击") return } const el = document.getElementById("print-container") const iframe = document.createElement("IFRAME") let doc = null // iframe.setAttribute('style', 'position:absolute;top:0px;left:0px;width:100%;height:100%',); document.body.appendChild(iframe) doc = iframe.contentWindow.document // 引入打印的专有CSS样式,根据实际修改 doc.write(`<LINK rel="stylesheet" type="text/css" href="./orderPrint.css">`) doc.write(el.innerHTML) doc.close() // 获取iframe的焦点,从iframe开始打印 iframe.contentWindow.focus() iframe.onload = () => { iframe.contentWindow.print() document.body.removeChild(iframe) } if (navigator.userAgent.indexOf("MSIE") > 0) { document.body.removeChild(iframe) } const old = window.document.body.innerHTML const printPart = document.getElementById("print-container") window.document.body.innerHTML = "" window.document.body.appendChild(printPart) window.print() window.document.body.innerHTML = old window.location.reload() }优化这段代码
这段代码可以进行如下的优化:
1. 避免在函数内部操作 DOM,最好将其作为参数传递进来,这样可以提高代码的可重用性和可维护性。
```javascript
const print = (elId, cssUrl) => {
const el = document.getElementById(elId)
if (!el) {
message.error("找不到打印内容,请检查elId")
return
}
if (!baseInfo.orderCode) {
message.error("打印正在准备,请5秒后再点击")
return
}
const iframe = document.createElement("IFRAME")
document.body.appendChild(iframe)
const doc = iframe.contentWindow.document
doc.write(`<LINK rel="stylesheet" type="text/css" href="${cssUrl}">`)
doc.write(el.innerHTML)
doc.close()
iframe.contentWindow.focus()
iframe.onload = () => {
iframe.contentWindow.print()
document.body.removeChild(iframe)
}
if (navigator.userAgent.indexOf("MSIE") > 0) {
document.body.removeChild(iframe)
}
}
```
2. 将打印的专有CSS样式和打印的内容分开处理,以便更好地维护和修改样式。
```javascript
const print = (elId, cssUrl, printContent) => {
const el = document.getElementById(elId)
if (!el) {
message.error("找不到打印内容,请检查elId")
return
}
if (!baseInfo.orderCode) {
message.error("打印正在准备,请5秒后再点击")
return
}
const iframe = document.createElement("IFRAME")
document.body.appendChild(iframe)
const doc = iframe.contentWindow.document
const link = document.createElement("link")
link.rel = "stylesheet"
link.type = "text/css"
link.href = cssUrl
doc.head.appendChild(link)
doc.body.innerHTML = printContent || el.innerHTML
iframe.contentWindow.focus()
iframe.onload = () => {
iframe.contentWindow.print()
document.body.removeChild(iframe)
}
if (navigator.userAgent.indexOf("MSIE") > 0) {
document.body.removeChild(iframe)
}
}
```
3. 将打印内容从 DOM 中分离出来,以便在不同的场合下方便地调用。
```javascript
const printContent = (elId) => {
const el = document.getElementById(elId)
if (!el) {
message.error("找不到打印内容,请检查elId")
return ""
}
return el.innerHTML
}
const print = (elId, cssUrl, printContent) => {
if (!baseInfo.orderCode) {
message.error("打印正在准备,请5秒后再点击")
return
}
const iframe = document.createElement("IFRAME")
document.body.appendChild(iframe)
const doc = iframe.contentWindow.document
const link = document.createElement("link")
link.rel = "stylesheet"
link.type = "text/css"
link.href = cssUrl
doc.head.appendChild(link)
doc.body.innerHTML = printContent || printContent(elId)
iframe.contentWindow.focus()
iframe.onload = () => {
iframe.contentWindow.print()
document.body.removeChild(iframe)
}
if (navigator.userAgent.indexOf("MSIE") > 0) {
document.body.removeChild(iframe)
}
}
```
vue使用 window.open打开新窗口在新窗口打印
在Vue中,你可以通过`window.open()`函数创建一个新的浏览器窗口,并使用`target`属性指定这个新的窗口。如果你想要在新窗口中打印内容,通常会在新窗口加载完成后,向其中插入一个iframe,然后在这个iframe中执行打印操作。这里是一个简单的示例:
```javascript
// 创建新窗口
const newWindow = window.open('', '_blank', 'width=800,height=600');
// 等待新窗口加载完成
newWindow.onload = function() {
// 在新窗口插入一个iframe
const iframe = document.createElement('iframe');
iframe.srcdoc = `
<html>
<head>
<script>
function printContent() {
window.print();
}
</script>
</head>
<body onclick="printContent()">
<!-- 这里可以添加你需要打印的内容 -->
<p>这是要打印的文字</p>
</body>
</html>
`;
// 将iframe添加到新窗口
newWindow.document.body.appendChild(iframe);
};
// 如果你想直接在新窗口打印文本,也可以这样做(但这需要目标页面支持)
newWindow.print = function(text) {
newWindow.document.write('<h1>' + text + '</h1>');
newWindow.print();
};
```
请注意,上述代码仅供参考,实际应用可能需要处理更多边缘情况,例如用户取消打印等。
阅读全文