From 0b30df20b7d737e997d2534cdc7c434e90ea0c3a Mon Sep 17 00:00:00 2001 From: Radi Totev Date: Tue, 17 Oct 2023 12:37:50 +0300 Subject: [PATCH 1/3] Extend library support - Vue 2 support - Vue 3 + TS support - provide utility function --- build/vue-html-to-paper.js | 154 ++++++++++++++++++++----------------- dist/index.js | 142 ++++++++++++++++++---------------- src/index.js | 138 ++++++++++++++++++--------------- types/index.d.ts | 4 +- 4 files changed, 239 insertions(+), 199 deletions(-) diff --git a/build/vue-html-to-paper.js b/build/vue-html-to-paper.js index 99dba1e..d1a1f0b 100644 --- a/build/vue-html-to-paper.js +++ b/build/vue-html-to-paper.js @@ -1,11 +1,11 @@ (function (global, factory) { - typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() : - typeof define === 'function' && define.amd ? define(factory) : - (global = typeof globalThis !== 'undefined' ? globalThis : global || self, global.VueHtmlToPaper = factory()); -}(this, (function () { 'use strict'; + typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) : + typeof define === 'function' && define.amd ? define(['exports'], factory) : + (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.VueHtmlToPaper = {})); +})(this, (function (exports) { 'use strict'; function addStyles (win, styles) { - styles.forEach(style => { + styles.forEach((style) => { let link = win.document.createElement('link'); link.setAttribute('rel', 'stylesheet'); link.setAttribute('type', 'text/css'); @@ -23,75 +23,89 @@ windowRef.focus(); return windowRef; } - + + let defaultOptions = { + name: '_blank', + specs: ['fullscreen=yes', 'titlebar=yes', 'scrollbars=yes'], + replace: true, + styles: [], + autoClose: true, + windowTitle: null, + }; + + const useHtmlToPaper = (el, localOptions = {}, cb = () => true) => { + const { + name, + specs, + replace, + styles, + autoClose, + windowTitle, + } = { + ...defaultOptions, + ...localOptions, + }; + + const formattedSpecs = !!specs.length ? specs.join(',') : ''; + + const element = window.document.getElementById(el); + + if (!element) { + alert(`Element to print #${el} not found!`); + return; + } + + const url = ''; + const win = openWindow(url, name, formattedSpecs); + + win.document.write(` + + + ${windowTitle || window.document.title} + + + ${element.innerHTML} + + + `); + + addStyles(win, styles); + + setTimeout(() => { + win.focus(); + win.print(); + console.warn('autoClose', autoClose); + if (autoClose) { + setTimeout(function () { + win.close(); + }, 1); + } + cb(); + }, 1000); + + return true; + }; + const VueHtmlToPaper = { install (app, options = {}) { - app.config.globalProperties.$htmlToPaper = (el, localOptions, cb = () => true) => { - let defaultName = '_blank', - defaultSpecs = ['fullscreen=yes','titlebar=yes', 'scrollbars=yes'], - defaultReplace = true, - defaultStyles = [], - defaultWindowTitle = window.document.title; - let { - name = defaultName, - specs = defaultSpecs, - replace = defaultReplace, - styles = defaultStyles, - autoClose = true, - windowTitle = defaultWindowTitle, - } = options; - - // If has localOptions - // TODO: improve logic - if (!!localOptions) { - if (localOptions.name) name = localOptions.name; - if (localOptions.specs) specs = localOptions.specs; - if (localOptions.replace) replace = localOptions.replace; - if (localOptions.styles) styles = localOptions.styles; - if (localOptions.autoClose === false) autoClose = localOptions.autoClose; - if (localOptions.windowTitle) windowTitle = localOptions.windowTitle; - } - - specs = !!specs.length ? specs.join(',') : ''; - - const element = window.document.getElementById(el); - - if (!element) { - alert(`Element to print #${el} not found!`); - return; - } - - const url = ''; - const win = openWindow(url, name, specs); - - win.document.write(` - - - ${windowTitle || window.document.title} - - - ${element.innerHTML} - - - `); - - addStyles(win, styles); - - setTimeout(() => { - win.focus(); - win.print(); - console.warn('autoClose', autoClose); - if (autoClose) { - setTimeout(function () {win.close();}, 1); - } - cb(); - }, 1000); - - return true; + defaultOptions = { + ...defaultOptions, + ...options, }; + + if (app.prototype) { + app.prototype.$htmlToPaper = useHtmlToPaper; + } else { + app.provide('htmlToPaper', useHtmlToPaper); + + app.config.globalProperties.$htmlToPaper = useHtmlToPaper; + } }, }; - return VueHtmlToPaper; + exports.VueHtmlToPaper = VueHtmlToPaper; + exports.useHtmlToPaper = useHtmlToPaper; + + Object.defineProperty(exports, '__esModule', { value: true }); -}))); +})); diff --git a/dist/index.js b/dist/index.js index 2dfad2e..6c35b92 100644 --- a/dist/index.js +++ b/dist/index.js @@ -3,7 +3,7 @@ Object.defineProperty(exports, '__esModule', { value: true }); function addStyles (win, styles) { - styles.forEach(style => { + styles.forEach((style) => { let link = win.document.createElement('link'); link.setAttribute('rel', 'stylesheet'); link.setAttribute('type', 'text/css'); @@ -21,73 +21,85 @@ function openWindow (url, name, props) { windowRef.focus(); return windowRef; } - + +let defaultOptions = { + name: '_blank', + specs: ['fullscreen=yes', 'titlebar=yes', 'scrollbars=yes'], + replace: true, + styles: [], + autoClose: true, + windowTitle: null, +}; + +const useHtmlToPaper = (el, localOptions = {}, cb = () => true) => { + const { + name, + specs, + replace, + styles, + autoClose, + windowTitle, + } = { + ...defaultOptions, + ...localOptions, + }; + + const formattedSpecs = !!specs.length ? specs.join(',') : ''; + + const element = window.document.getElementById(el); + + if (!element) { + alert(`Element to print #${el} not found!`); + return; + } + + const url = ''; + const win = openWindow(url, name, formattedSpecs); + + win.document.write(` + + + ${windowTitle || window.document.title} + + + ${element.innerHTML} + + + `); + + addStyles(win, styles); + + setTimeout(() => { + win.focus(); + win.print(); + console.warn('autoClose', autoClose); + if (autoClose) { + setTimeout(function () { + win.close(); + }, 1); + } + cb(); + }, 1000); + + return true; +}; + const VueHtmlToPaper = { install (app, options = {}) { - app.config.globalProperties.$htmlToPaper = (el, localOptions, cb = () => true) => { - let defaultName = '_blank', - defaultSpecs = ['fullscreen=yes','titlebar=yes', 'scrollbars=yes'], - defaultReplace = true, - defaultStyles = [], - defaultWindowTitle = window.document.title; - let { - name = defaultName, - specs = defaultSpecs, - replace = defaultReplace, - styles = defaultStyles, - autoClose = true, - windowTitle = defaultWindowTitle, - } = options; - - // If has localOptions - // TODO: improve logic - if (!!localOptions) { - if (localOptions.name) name = localOptions.name; - if (localOptions.specs) specs = localOptions.specs; - if (localOptions.replace) replace = localOptions.replace; - if (localOptions.styles) styles = localOptions.styles; - if (localOptions.autoClose === false) autoClose = localOptions.autoClose; - if (localOptions.windowTitle) windowTitle = localOptions.windowTitle; - } - - specs = !!specs.length ? specs.join(',') : ''; - - const element = window.document.getElementById(el); - - if (!element) { - alert(`Element to print #${el} not found!`); - return; - } - - const url = ''; - const win = openWindow(url, name, specs); - - win.document.write(` - - - ${windowTitle || window.document.title} - - - ${element.innerHTML} - - - `); - - addStyles(win, styles); - - setTimeout(() => { - win.focus(); - win.print(); - console.warn('autoClose', autoClose); - if (autoClose) { - setTimeout(function () {win.close();}, 1); - } - cb(); - }, 1000); - - return true; + defaultOptions = { + ...defaultOptions, + ...options, }; + + if (app.prototype) { + app.prototype.$htmlToPaper = useHtmlToPaper; + } else { + app.provide('htmlToPaper', useHtmlToPaper); + + app.config.globalProperties.$htmlToPaper = useHtmlToPaper; + } }, }; -exports.default = VueHtmlToPaper; +exports.VueHtmlToPaper = VueHtmlToPaper; +exports.useHtmlToPaper = useHtmlToPaper; diff --git a/src/index.js b/src/index.js index 6483788..d370ed4 100644 --- a/src/index.js +++ b/src/index.js @@ -1,5 +1,5 @@ function addStyles (win, styles) { - styles.forEach(style => { + styles.forEach((style) => { let link = win.document.createElement('link'); link.setAttribute('rel', 'stylesheet'); link.setAttribute('type', 'text/css'); @@ -10,7 +10,8 @@ function addStyles (win, styles) { function openWindow (url, name, props) { let windowRef = null; - if (/*@cc_on!@*/false) { // for IE only + if (/*@cc_on!@*/ false) { + // for IE only windowRef = window.open('', name, props); windowRef.close(); } @@ -21,73 +22,84 @@ function openWindow (url, name, props) { windowRef.focus(); return windowRef; } - -const VueHtmlToPaper = { - install (app, options = {}) { - app.config.globalProperties.$htmlToPaper = (el, localOptions, cb = () => true) => { - let defaultName = '_blank', - defaultSpecs = ['fullscreen=yes','titlebar=yes', 'scrollbars=yes'], - defaultReplace = true, - defaultStyles = [], - defaultWindowTitle = window.document.title; - let { - name = defaultName, - specs = defaultSpecs, - replace = defaultReplace, - styles = defaultStyles, - autoClose = true, - windowTitle = defaultWindowTitle, - } = options; - // If has localOptions - // TODO: improve logic - if (!!localOptions) { - if (localOptions.name) name = localOptions.name; - if (localOptions.specs) specs = localOptions.specs; - if (localOptions.replace) replace = localOptions.replace; - if (localOptions.styles) styles = localOptions.styles; - if (localOptions.autoClose === false) autoClose = localOptions.autoClose; - if (localOptions.windowTitle) windowTitle = localOptions.windowTitle; - } +let defaultOptions = { + name: '_blank', + specs: ['fullscreen=yes', 'titlebar=yes', 'scrollbars=yes'], + replace: true, + styles: [], + autoClose: true, + windowTitle: null, +}; + +const useHtmlToPaper = (el, localOptions = {}, cb = () => true) => { + const { + name, + specs, + replace, + styles, + autoClose, + windowTitle, + } = { + ...defaultOptions, + ...localOptions, + }; + + const formattedSpecs = !!specs.length ? specs.join(',') : ''; + + const element = window.document.getElementById(el); + + if (!element) { + alert(`Element to print #${el} not found!`); + return; + } - specs = !!specs.length ? specs.join(',') : ''; + const url = ''; + const win = openWindow(url, name, formattedSpecs); - const element = window.document.getElementById(el); + win.document.write(` + + + ${windowTitle || window.document.title} + + + ${element.innerHTML} + + + `); - if (!element) { - alert(`Element to print #${el} not found!`); - return; - } - - const url = ''; - const win = openWindow(url, name, specs); + addStyles(win, styles); - win.document.write(` - - - ${windowTitle || window.document.title} - - - ${element.innerHTML} - - - `); + setTimeout(() => { + win.focus(); + win.print(); + console.warn('autoClose', autoClose); + if (autoClose) { + setTimeout(function () { + win.close(); + }, 1); + } + cb(); + }, 1000); - addStyles(win, styles); - - setTimeout(() => { - win.focus(); - win.print(); - console.warn('autoClose', autoClose); - if (autoClose) { - setTimeout(function () {win.close();}, 1); - } - cb(); - }, 1000); - - return true; + return true; +}; + +const VueHtmlToPaper = { + install (app, options = {}) { + defaultOptions = { + ...defaultOptions, + ...options, }; + + if (app.prototype) { + app.prototype.$htmlToPaper = useHtmlToPaper; + } else { + app.provide('htmlToPaper', useHtmlToPaper); + + app.config.globalProperties.$htmlToPaper = useHtmlToPaper; + } }, }; - -export default VueHtmlToPaper; + +export {VueHtmlToPaper, useHtmlToPaper}; diff --git a/types/index.d.ts b/types/index.d.ts index 7b5e699..a877c0f 100644 --- a/types/index.d.ts +++ b/types/index.d.ts @@ -15,11 +15,13 @@ interface Options { interface HtmlToPaper { ( id: string | HTMLElement, - localOptions: Options, + localOptions?: Options, callback?: () => void ): Promise } +export const useHtmlToPaper: HtmlToPaper + export const VueHtmlToPaper: Plugin declare module "vue" { From 6f844c9e2f7f8449e5addb728e929e2c9ed0f966 Mon Sep 17 00:00:00 2001 From: Radi Totev Date: Tue, 17 Oct 2023 12:50:30 +0300 Subject: [PATCH 2/3] Update README --- README.md | 224 ++++++++++++++++++++++++++++++++++++++++++++++++++++-- 1 file changed, 218 insertions(+), 6 deletions(-) diff --git a/README.md b/README.md index 3f3b9c3..4a3ab4f 100644 --- a/README.md +++ b/README.md @@ -1,22 +1,234 @@ # Vue HTML to Paper -Vue 3 plugin for printing html elements. +Vue plugin for printing html elements. ![npm](https://img.shields.io/npm/dw/vue-html-to-paper) -### Vue 3 - [Demo](https://mycurelabs.github.io/vue-html-to-paper/) [GitBook Documentation](https://oss.mycure.md/v/vue-html-to-paper/) +## Install + +```sh +npm install vue-html-to-paper +yarn add vue-html-to-paper +``` + +## Development Setup + +``` +npm install + +npm run build:all +``` + +## Usage + +### Vue 3, Vue 2 +- initialize in `main.ts|js` (optional) +- use in component: +```js +