Vue html to paper

vue-html-to-paper

Use the callback function to be notified when printing has been completed (whether or not it was successful). The callback method is not required.

When using callback, be aware that there’s now a 2nd argument for local options. So the callback will be the 3rd arg. Pass null as 2nd arg if you don’t want to override the global options.

this.$htmlToPaper('printMe', null, () =>  console.log('Printing completed or was cancelled!'); >);

FAQ

How to print in landscape

In the global option, you can pass a css with the following:

@media print < @page < size: landscape > >

Then, inject the custom css in the styles option like so:

const options =  styles: [ 'https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css', './path/to/custom.css' // ] >

This can also be done by using the local option.

Made with ❤️ by Jofferson Ramirez Tiquez

Источник

Vue Mixin For Paper Printing HTML Elements | vue-html-to-paper

Vue HTML to Paper is a Vue mixin for printing paper for HTML elements.

How to make use of 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 application form:

  
  
Print me!
 
   

4. Possible options.

See Demo And Download

Official Website (mycurelabs): Click Here

This superior jQuery/javascript plugin is developed by mycurelabs. For extra Advanced Usage, please go to the official website.

Related Posts

A Simple Javascript Background Parallax Scrolling Library | parascroll.js

Parascroll.js provides a simple image scroller that can be easily integrated into any website. It is ideal for backgrounds on “hero” style elements but can be used…

JavaScript Library To Add Scrambling/Decoding Effect To Your Text | Scrambling Letters

Scrambling Letters is a lightweight JavaScript library for scrambling letters within a piece of text, giving a nice decoding effect. It cycles through any elements with a…

Free Library Agnostic Touch Slider with Swipe | keen-slider

keen-slider is a free neutral touch slider for the library with original swiper/scroll behavior and great performance. It does not come with any dependencies, support for print…

A JavaScript library that allows you to Create an Easily Interactive World Map | svgMap

svgMap is a JavaScript library that allows you to create an SVG-supported interactive world map on the web page, with support for an info window that can…

Cross WebView to Fit 100% of Any Web Page | screenfit

Screenfit is a cross-platform and cross-platform web view solution that 100% fits any webpage. This JavaScript library makes your page well-suited for a screen across all browsers…

A Moving Multi-Animated Number Counter That Works When Visible

Multi Animated Counter is a small, configurable plugin for jQuery number counter to count or countdown to the desired number when passing a counter item to display. Key…

Источник

Saved searches

Use saved searches to filter your results more quickly

You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session.

License

gkandemi/vue-html-print

This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?

Sign In Required

Please sign in to use Codespaces.

Launching GitHub Desktop

If nothing happens, download GitHub Desktop and try again.

Launching GitHub Desktop

If nothing happens, download GitHub Desktop and try again.

Launching Xcode

If nothing happens, download Xcode and try again.

Launching Visual Studio Code

Your codespace will open once ready.

There was a problem preparing your codespace, please try again.

Latest commit

Git stats

Files

Failed to load latest commit information.

README.md

Vue mixin for paper printing html elements.

npm install vue-html-to-paper 

https://unpkg.com/vue-html-to-paper/build/vue-html-to-paper.js 

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); // or, using the defaults with no stylesheet Vue.use(VueHtmlToPaper);

template> div> div id pl-s">printMe"> h1>Print me!h1> div> button @click pl-s">print">button> div> template> script> export default  data ()  return  output: null > >, methods:  print ()  // Pass the element id here this.$htmlToPaper('printMe'); > > > script>

Use the callback function to be notified when printing has been completed (whether or not it was successful). The callback method is not required.

When using callback, be aware that there’s now a 2nd argument for local options. So the callback will be the 3rd arg. Pass null as 2nd arg if you don’t want to override the global options.

this.$htmlToPaper('printMe', null, () =>  console.log('Printing completed or was cancelled!'); >);

How to print in landscape

In the global option, you can pass a css with the following:

@media print < @page < size: landscape > >

Then, inject the custom css in the styles option like so:

const options =  styles: [ 'https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css', './path/to/custom.css' // ] >

This can also be done by using the local option.

Made with ❤️ by Jofferson Ramirez Tiquez

Источник

Vue html to paper

Vue mixin for paper printing html elements.

npm install vue-html-to-paper 

https://unpkg.com/vue-html-to-paper/build/vue-html-to-paper.js 

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);
 
// or, using the defaults with no stylesheet
Vue.use(VueHtmlToPaper);

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> 

Use the callback function to be notified when printing has been completed (whether or not it was successful). The callback method is not required.

When using callback, be aware that there’s now a 2nd argument for local options. So the callback will be the 3rd arg. Pass null as 2nd arg if you don’t want to override the global options.

this.$htmlToPaper('printMe', null, () => 
 console.log('Printing completed or was cancelled!');
>);

How to print in landscape

In the global option, you can pass a css with the following:

@media print 
 @page 
 size: landscape
 >
>

Then, inject the custom css in the styles option like so:

const options = 
 styles: [
 'https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css',
 './path/to/custom.css' // 
 ]
>

This can also be done by using the local option.

Made with ❤️ by Jofferson Ramirez Tiquez

Источник