window.print()打印iframe页面
时间: 2023-09-25 12:16:00 浏览: 97
可以使用以下代码:
```javascript
var myframe = document.getElementById('myframe');
myframe.contentWindow.print();
```
其中,`myframe` 是指你的 `iframe` 元素,`contentWindow` 则是获取 `iframe` 中的文档对象。最后调用 `print()` 方法即可打印。需要注意的是,如果 `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)
}
}
```
js window.print() 设置参数
在 JavaScript 中,`window.print()` 方法用于打印当前页面。可以通过传递一个 `WindowPrintOptions` 对象作为参数来设置打印选项。下面是一些常用的选项:
1. `title`:指定打印页的标题。
2. `docType`:指定打印页的文档类型(“html5” 或 “xhtml”)。
3. `printMode`:指定打印模式(“iframe” 或 “popup”)。
4. `printDelay`:指定延迟时间(以毫秒为单位)。
5. `printerName`:指定打印机名称。
6. `printToFileName`:指定保存的文件名。
下面是一个示例:
```javascript
var printOptions = {
title: "My Document",
docType: "html5",
printMode: "popup",
printDelay: 500,
printerName: "My Printer",
printToFileName: "My Document.pdf"
};
window.print(printOptions);
```