mirror of
https://git.meshkee.com/cssd/cssd-back.git
synced 2026-10-12 02:41:06 +03:30
99 lines
1.7 KiB
Markdown
99 lines
1.7 KiB
Markdown
# vue-html-to-paper
|
|
Vue mixin for paper printing html elements.
|
|
|
|
### Demo
|
|
|
|
https://mycure-inc.github.io/vue-html-to-paper/
|
|
|
|
### Install
|
|
|
|
**NPM**
|
|
```
|
|
npm install vue-html-to-paper
|
|
```
|
|
**Yarn**
|
|
```
|
|
yarn add vue-html-to-paper
|
|
```
|
|
**CDN**
|
|
```
|
|
https://unpkg.com/vue-html-to-paper/build/vue-html-to-paper.js
|
|
```
|
|
|
|
### Usage
|
|
|
|
**main.js**
|
|
|
|
```javascript
|
|
import Vue from 'vue';
|
|
import VueHtmlToPaper from 'vue-html-to-paper';
|
|
|
|
const options = {
|
|
name: '_blank',
|
|
specs: [
|
|
'fullscreen=yes',
|
|
'titlebar=yes',
|
|
'scrollbars=yes'
|
|
],
|
|
styles: [
|
|
'https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css',
|
|
'https://unpkg.com/kidlat-css/css/kidlat.css'
|
|
]
|
|
}
|
|
|
|
Vue.use(VueHtmlToPaper, options);
|
|
```
|
|
|
|
See `window.open` API [here](https://www.w3schools.com/Jsref/met_win_open.asp).
|
|
|
|
**component**
|
|
|
|
```html
|
|
<template>
|
|
<div>
|
|
<!-- SOURCE -->
|
|
<div id="printMe">
|
|
<h1>Print me!</h1>
|
|
</div>
|
|
<!-- OUTPUT -->
|
|
<button @click="print"></button>
|
|
</div>
|
|
<template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
output: null
|
|
}
|
|
},
|
|
methods: {
|
|
print() {
|
|
// Pass the element id here
|
|
this.$htmlToPaper('printMe', () => {
|
|
console.log('Printing done or got cancelled!');
|
|
});
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
```
|
|
|
|
### Callback
|
|
|
|
Use the callback function to know if the printing has been done or got cancelled.
|
|
|
|
```js
|
|
this.$htmlToPaper('printMe', () => {
|
|
console.log('Printing done or got cancelled!');
|
|
});
|
|
```
|
|
|
|
*Deprecated*
|
|
|
|
> You can no longer pass options in the `$htmlToPaper` methods.
|
|
|
|
> ~~You can also pass options to `this.$htmlToPaper('printMe', options);` to override the global options in the `Vue.use(VueHtmlToPaper, options)`~~.
|
|
|
|
Made with ❤️ by Jofferson Ramirez Tiquez
|