hy-print
Version:
print for table
154 lines (141 loc) • 6.1 kB
text/typescript
import html2canvas from "html2canvas";
import {printType,allOfT} from './types.ts'
export default class print implements allOfT {
private doc: any
private iframe: HTMLIFrameElement
private clone: boolean
private id: string | undefined | null
private markWater?: {
text: string
gapX: number
gapY: number
}
private element: Element | undefined | null;
private type: "hyOnlyTable" | "canvas" | "print.js" | "normal" | "amis" | undefined | null;
constructor({element, type, markWater, clone, id}: printType) {
[this.element, this.type, this.markWater, this.clone, this.id] = [element, type, markWater, clone, id]
}
init(): void {
this.changeWay()
}
private changeWay(): void {
// if ((this.element!==undefined&&this.element!==null)&&this.isElement(this.element)){
// if (this.type=="hyOnlyTable")
// this.createIframebyElement()
// }
if (this.id !== undefined && this.id !== null) {
this.element = document.getElementById(this.id)
}
this.createIframebyElement()
}
private createIframebyElement() {
this.iframe = document.createElement('iframe') as HTMLIFrameElement
this.iframe.src = 'about:blank'
this.iframe.style.position = 'absolute'
this.iframe.style.width = '0px'
this.iframe.style.height = '0px'
this.iframe.style.border = 'none'
document.body.appendChild(this.iframe)
this.doc = this.iframe.contentWindow?.document
this.doc.open()
if (this.type === 'canvas') {
html2canvas(this.element as HTMLElement).then((canvas) => {
const imgSrc = canvas.toDataURL('image/png'); // or 'image/jpeg'
this.doc.write(`
<html>
<style>
.watermark-container {position: fixed !important;top: 0;left: 0;width: 100vw;height: 100vh;pointer-events: none;z-index: 9999;overflow: hidden;}
.watermark {position: absolute;font-size: 20px;color: rgba(0, 0, 0, 0.1);transform: rotate(-30deg);white-space: nowrap;user-select: none; }
</style>
<body>
<section class="watermark-container" id="watermarkContainer" style="margin:0; display:flex; justify-content:center; align-items:flex-start;">
<img style="width: 100%" src="${imgSrc}" />
</section>
</body>
</html>
`);
this.doc.close()
setTimeout(() => {
this.print()
})
});
} else if (this.type === 'amis') {
this.doc.write(
'<html lang=""><head><title>打印</title><style> table {\n' +
' border-collapse: collapse;\n' +
' width: 100%;\n' +
' }\n' +
' th, td {\n' +
' border: 1px solid black;\n' +
' padding: 5px;\n' +
' }\n' +
'.watermark-container {\n' +
' position: fixed !important;\n' +
' top: 0;\n' +
' left: 0;\n' +
' width: 100vw;\n' +
' height: 100vh;\n' +
' pointer-events: none;\n' +
' z-index: 9999;\n' +
'overflow: hidden;' +
' }\n' +
'.watermark {\n' +
' position: absolute;\n' +
' font-size: 20px;\n' +
' color: rgba(0, 0, 0, 0.1);\n' +
' transform: rotate(-30deg);\n' +
' white-space: nowrap;\n' +
' user-select: none;\n' +
' }body{overflow: hidden}@page {\n' +
' size: A4;\n' +
' margin: 10mm; page-break-after: always;\n' +
'}</style>\n' +
' </head> </head><body>'
)
this.doc.write(this.element?.innerHTML)
this.doc.write('<div class="watermark-container" id="watermarkContainer"></div></body></html>')
console.log(this.doc)
if (this.clone) {
document.querySelectorAll('link[rel="stylesheet"], style').forEach((el) => {
this.doc.head.appendChild(el.cloneNode(true));
})
}
this.doc.close()
if (this.markWater !== undefined && this.markWater !== null) {
this.ToMarkWater()
}
this.print()
}
}
private print() {
this.iframe.contentWindow?.focus()
this.iframe.contentWindow?.print()
}
// private isElement(obj: any): boolean {
// return (
// obj !== null &&
// typeof obj === 'object' &&
// obj.nodeType === 1 &&
// typeof obj.nodeName === 'string'
// )
// }
private ToMarkWater(): void {
if (this.markWater !== undefined) {
const watermarkContainer = this.doc.getElementById('watermarkContainer')
const pageWidth = this.iframe.contentWindow?.document.body.scrollWidth as number
const pageHeight = Math.floor(<number>this.iframe.contentWindow?.document.body.scrollHeight)
const rows = Math.ceil(pageHeight / this.markWater.gapY)
const cols = Math.ceil(pageWidth / this.markWater.gapX)
for (let i = 0; i < rows; i++) {
for (let j = 0; j < cols; j++) {
let watermark = this.doc.createElement('div')
watermark.className = 'watermark'
watermark.innerText = this.markWater.text
watermark.style.top = `${i * this.markWater.gapY}px`
watermark.style.left = `${j * this.markWater.gapX}px`
watermarkContainer.appendChild(watermark)
}
}
}
}
}