interface PrintFunction {
|
extendOptions: Function;
|
getStyle: Function;
|
setDomHeight: Function;
|
toPrint: Function;
|
}
|
|
const Print = function (dom, options?: object): PrintFunction {
|
options = options || {};
|
// @ts-expect-error
|
if (!(this instanceof Print)) return new Print(dom, options);
|
// @ts-expect-error
|
this.conf = {
|
styleStr: "",
|
// Elements that need to dynamically get and set the height
|
setDomHeightArr: [],
|
// Callback before printing
|
printBeforeFn: null,
|
// Callback after printing
|
printDoneCallBack: null
|
};
|
// @ts-expect-error
|
for (const key in this.conf) {
|
if (key && options.hasOwnProperty(key)) {
|
// @ts-expect-error
|
this.conf[key] = options[key];
|
}
|
}
|
if (typeof dom === "string") {
|
// @ts-expect-error
|
this.dom = document.querySelector(dom);
|
} else {
|
// @ts-expect-error
|
this.dom = this.isDOM(dom) ? dom : dom.$el;
|
}
|
// @ts-expect-error
|
if (this.conf.setDomHeightArr && this.conf.setDomHeightArr.length) {
|
// @ts-expect-error
|
this.setDomHeight(this.conf.setDomHeightArr);
|
}
|
// @ts-expect-error
|
this.init();
|
};
|
|
Print.prototype = {
|
/**
|
* init
|
*/
|
init: function (): void {
|
const content = this.getStyle() + this.getHtml();
|
this.writeIframe(content);
|
},
|
/**
|
* Configuration property extension
|
* @param {Object} obj
|
* @param {Object} obj2
|
*/
|
extendOptions: function <T>(obj, obj2: T): T {
|
for (const k in obj2) {
|
obj[k] = obj2[k];
|
}
|
return obj;
|
},
|
/**
|
Copy all styles of the original page
|
*/
|
getStyle: function (): string {
|
let str = "";
|
const styles: NodeListOf<Element> = document.querySelectorAll("style,link");
|
for (let i = 0; i < styles.length; i++) {
|
str += styles[i].outerHTML;
|
}
|
str += `<style>.no-print{display:none;}${this.conf.styleStr}</style>`;
|
return str;
|
},
|
// form assignment
|
getHtml: function (): Element {
|
const inputs = document.querySelectorAll("input");
|
const selects = document.querySelectorAll("select");
|
const textareas = document.querySelectorAll("textarea");
|
const canvass = document.querySelectorAll("canvas");
|
|
for (let k = 0; k < inputs.length; k++) {
|
if (inputs[k].type == "checkbox" || inputs[k].type == "radio") {
|
if (inputs[k].checked == true) {
|
inputs[k].setAttribute("checked", "checked");
|
} else {
|
inputs[k].removeAttribute("checked");
|
}
|
} else if (inputs[k].type == "text") {
|
inputs[k].setAttribute("value", inputs[k].value);
|
} else {
|
inputs[k].setAttribute("value", inputs[k].value);
|
}
|
}
|
|
for (let k2 = 0; k2 < textareas.length; k2++) {
|
if (textareas[k2].type == "textarea") {
|
textareas[k2].innerHTML = textareas[k2].value;
|
}
|
}
|
|
for (let k3 = 0; k3 < selects.length; k3++) {
|
if (selects[k3].type == "select-one") {
|
const child = selects[k3].children;
|
for (const i in child) {
|
if (child[i].tagName == "OPTION") {
|
if ((child[i] as any).selected == true) {
|
child[i].setAttribute("selected", "selected");
|
} else {
|
child[i].removeAttribute("selected");
|
}
|
}
|
}
|
}
|
}
|
|
for (let k4 = 0; k4 < canvass.length; k4++) {
|
const imageURL = canvass[k4].toDataURL("image/png");
|
const img = document.createElement("img");
|
img.src = imageURL;
|
img.setAttribute("style", "max-width: 100%;");
|
img.className = "isNeedRemove";
|
canvass[k4].parentNode.insertBefore(img, canvass[k4].nextElementSibling);
|
}
|
|
return this.dom.outerHTML;
|
},
|
/**
|
create iframe
|
*/
|
writeIframe: function (content) {
|
let w: Document | Window;
|
let doc: Document;
|
const iframe: HTMLIFrameElement = document.createElement("iframe");
|
const f: HTMLIFrameElement = document.body.appendChild(iframe);
|
iframe.id = "myIframe";
|
iframe.setAttribute(
|
"style",
|
"position:absolute;width:0;height:0;top:-10px;left:-10px;"
|
);
|
|
// eslint-disable-next-line prefer-const
|
w = f.contentWindow || f.contentDocument;
|
|
// eslint-disable-next-line prefer-const
|
doc = f.contentDocument || f.contentWindow.document;
|
doc.open();
|
doc.write(content);
|
doc.close();
|
|
const removes = document.querySelectorAll(".isNeedRemove");
|
for (let k = 0; k < removes.length; k++) {
|
removes[k].parentNode.removeChild(removes[k]);
|
}
|
|
// eslint-disable-next-line @typescript-eslint/no-this-alias
|
const _this = this;
|
iframe.onload = function (): void {
|
// Before popping, callback
|
if (_this.conf.printBeforeFn) {
|
_this.conf.printBeforeFn({ doc });
|
}
|
_this.toPrint(w);
|
setTimeout(function () {
|
document.body.removeChild(iframe);
|
// After popup, callback
|
if (_this.conf.printDoneCallBack) {
|
_this.conf.printDoneCallBack();
|
}
|
}, 100);
|
};
|
},
|
/**
|
Print
|
*/
|
toPrint: function (frameWindow): void {
|
try {
|
setTimeout(function () {
|
frameWindow.focus();
|
try {
|
if (!frameWindow.document.execCommand("print", false, null)) {
|
frameWindow.print();
|
}
|
} catch {
|
frameWindow.print();
|
}
|
frameWindow.close();
|
}, 10);
|
} catch (err) {
|
console.error(err);
|
}
|
},
|
isDOM:
|
typeof HTMLElement === "object"
|
? function (obj) {
|
return obj instanceof HTMLElement;
|
}
|
: function (obj) {
|
return (
|
obj &&
|
typeof obj === "object" &&
|
obj.nodeType === 1 &&
|
typeof obj.nodeName === "string"
|
);
|
},
|
/**
|
* Set the height of the specified dom element by getting the existing height of the dom element and setting
|
* @param {Array} arr
|
*/
|
setDomHeight(arr) {
|
if (arr && arr.length) {
|
arr.forEach(name => {
|
const domArr = document.querySelectorAll(name);
|
domArr.forEach(dom => {
|
dom.style.height = dom.offsetHeight + "px";
|
});
|
});
|
}
|
}
|
};
|
|
export default Print;
|
