Description:
This is a Vue mixin for paper printing HTML elements.
How to use it:
1. Import and install the vue-html-to-paper component.
import Vue from 'vue'; import VueHtmlToPaper from 'vue-html-to-paper';
2. Register the component.
Vue.use(VueHtmlToPaper, options); // or using the defaults with no stylesheet Vue.use(VueHtmlToPaper);
3. In your app template:
<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'); } } } </script>
4. Possible options.
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' ] }
Preview:
Download Details:
Author: mycurelabs
Live Demo: https://mycurelabs.github.io/vue-html-to-paper/
Download Link: https://github.com/mycurelabs/vue-html-to-paper/archive/master.zip
Official Website: https://github.com/mycurelabs/vue-html-to-paper
Install & Download:
# Yarn
$ yarn add vue-html-to-paper
# NPM
$ npm install vue-html-to-paper --save