@konsys.co/print
Version:
Template to generate printable preview page html in variety size
1 lines • 5.52 kB
Source Map (JSON)
{"version":3,"sources":["../src/page.ts"],"sourcesContent":["type PageSize = 'A4' | 'A4LSC' | 'A5' | 'A5LSC' | 'CUSTOM'\n\ntype PageConfig = {\n pageSize: PageSize | string\n width?: number\n height?: number\n}\n\nconst getWidthHeight = (config: PageConfig): { width: number, height: number } => {\n const { pageSize, width, height } = config\n switch (pageSize) {\n case 'A4' :\n return { width: 210, height: 297 }\n case 'A4LSC' :\n return { width: 297, height: 210 }\n case 'A5' :\n return { width: 148, height: 210 }\n case 'A5LSC' :\n return { width: 210, height: 148 }\n case 'CUSTOM' :\n if (!width || !height) throw new Error('Custom size must have width and height')\n return { width, height }\n default :\n return { width: 210, height: 297 }\n }\n}\n\nclass PageTemplate {\n pages: { content: string, customWidth?: number, customHeight?: number }[]\n title: string\n heads: string\n styles: string\n\n constructor(\n pages: { content: string, customConfig?: PageConfig }[],\n options: { title?: string, heads?: string, styles?: string } = {}\n ) {\n this.pages = pages.map(page => {\n const { content, customConfig } = page\n if (customConfig) {\n const { width, height } = getWidthHeight(customConfig)\n return { content, customWidth: width, customHeight: height }\n }\n return { content }\n })\n this.title = options.title || 'No Title'\n this.heads = options.heads || ''\n this.styles = options.styles || ''\n }\n\n public generatePrintablePage(defaultConfig: PageConfig = { pageSize: 'A4' }) {\n const { width, height } = getWidthHeight(defaultConfig)\n return `\n<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n <title>${this.title}</title>\n ${this.heads}\n <style>\n :root {\n --bleeding: 1cm;\n }\n * {\n box-sizing: border-box;\n }\n body {\n margin: 0 auto;\n padding: 0;\n background: rgb(204, 204, 204);\n display: flex;\n flex-direction: column;\n }\n b {\n font-weight: 600;\n }\n .page {\n display: inline-block;\n position: relative;\n margin: 2em auto;\n padding: var(--bleeding);\n box-shadow: 0 0 0 rgba(0, 0, 0, 0.5);\n background: white;\n font-family: Arial, Helvetica, sans-serif;\n }\n ${\n this.pages.map((page, i) => `\n @page page-${i} {\n size: ${page.customWidth || width}mm ${page.customHeight || height}mm;\n margin: 0;\n }\n .page-${i} {\n width: ${page.customWidth || width}mm;\n height: ${page.customHeight || height}mm;\n }\n `\n ).join('')\n }\n @media screen {\n .page::after {\n position: absolute;\n content: \"\";\n top: 0;\n left: 0;\n width: calc(100% - var(--bleeding) * 2);\n height: calc(100% - var(--bleeding) * 2);\n margin: var(--bleeding);\n outline: thin dashed rgba(0, 0, 0, 0.2);\n pointer-events: none;\n z-index: 9999;\n }\n }\n @media print {\n .page {\n margin: 0;\n overflow: hidden;\n }\n ${\n this.pages.map((_, i) => `\n .page-${i} {\n page: page-${i};\n }\n `\n ).join('')\n }\n }\n ${this.styles}\n </style>\n </head>\n <body>\n ${this.pages.map((page, i) => `<div class=\"page page-${i}\">${page.content}</div>`).join('')}\n </body>\n</html>\n `\n }\n}\n\nexport { PageTemplate }"],"mappings":";AAQA,IAAM,iBAAiB,CAAC,WAA0D;AAChF,QAAM,EAAE,UAAU,OAAO,OAAO,IAAI;AACpC,UAAQ,UAAU;AAAA,IAChB,KAAK;AACH,aAAO,EAAE,OAAO,KAAK,QAAQ,IAAI;AAAA,IACnC,KAAK;AACH,aAAO,EAAE,OAAO,KAAK,QAAQ,IAAI;AAAA,IACnC,KAAK;AACH,aAAO,EAAE,OAAO,KAAK,QAAQ,IAAI;AAAA,IACnC,KAAK;AACH,aAAO,EAAE,OAAO,KAAK,QAAQ,IAAI;AAAA,IACnC,KAAK;AACH,UAAI,CAAC,SAAS,CAAC,OAAQ,OAAM,IAAI,MAAM,wCAAwC;AAC/E,aAAO,EAAE,OAAO,OAAO;AAAA,IACzB;AACE,aAAO,EAAE,OAAO,KAAK,QAAQ,IAAI;AAAA,EACrC;AACF;AAEA,IAAM,eAAN,MAAmB;AAAA,EAMjB,YACE,OACA,UAA+D,CAAC,GAChE;AACA,SAAK,QAAQ,MAAM,IAAI,UAAQ;AAC7B,YAAM,EAAE,SAAS,aAAa,IAAI;AAClC,UAAI,cAAc;AAChB,cAAM,EAAE,OAAO,OAAO,IAAI,eAAe,YAAY;AACrD,eAAO,EAAE,SAAS,aAAa,OAAO,cAAc,OAAO;AAAA,MAC7D;AACA,aAAO,EAAE,QAAQ;AAAA,IACnB,CAAC;AACD,SAAK,QAAQ,QAAQ,SAAS;AAC9B,SAAK,QAAQ,QAAQ,SAAS;AAC9B,SAAK,SAAS,QAAQ,UAAU;AAAA,EAClC;AAAA,EAEO,sBAAsB,gBAA4B,EAAE,UAAU,KAAK,GAAG;AAC3E,UAAM,EAAE,OAAO,OAAO,IAAI,eAAe,aAAa;AACtD,WAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,aAME,KAAK,KAAK;AAAA,MACjB,KAAK,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QA4BR,KAAK,MAAM;AAAA,MAAI,CAAC,MAAM,MAAM;AAAA,qBACf,CAAC;AAAA,kBACJ,KAAK,eAAe,KAAK,MAAM,KAAK,gBAAgB,MAAM;AAAA;AAAA;AAAA,gBAG5D,CAAC;AAAA,mBACE,KAAK,eAAe,KAAK;AAAA,oBACxB,KAAK,gBAAgB,MAAM;AAAA;AAAA;AAAA,IAGvC,EAAE,KAAK,EAAE,CACX;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,UAqBI,KAAK,MAAM;AAAA,MAAI,CAAC,GAAG,MAAM;AAAA,kBACjB,CAAC;AAAA,yBACM,CAAC;AAAA;AAAA;AAAA,IAGhB,EAAE,KAAK,EAAE,CACX;AAAA;AAAA,QAEA,KAAK,MAAM;AAAA;AAAA;AAAA;AAAA,MAIb,KAAK,MAAM,IAAI,CAAC,MAAM,MAAM,yBAAyB,CAAC,KAAK,KAAK,OAAO,QAAQ,EAAE,KAAK,EAAE,CAAC;AAAA;AAAA;AAAA;AAAA,EAI7F;AACF;","names":[]}