CODEWITHSUNDEEP
vue.jsvuejs2
murday1983
murday1983

Reputation: 4026

Error When clicking 'Print' button using 'Vue HTML to Paper'

I have a vue app and I'm trying to implement the 'Vue HTML to Paper'.

I have followed all the instructions on https://randomcodetips.com/vue-html-to-paper/ but when i click my 'Print' button I get the following error.

enter image description here

Main.js

import Vue from 'vue';
import VueRouter from 'vue-router';
import App from './App.vue';
import { routes } from './routes';
import { store } from './store/store';
import 'bootstrap/dist/css/bootstrap.css';
import 'bootstrap-vue/dist/bootstrap-vue.css';
import VueHtmlToPaper from 'vue-html-to-paper';

const router = new VueRouter({
    // Loads page always at the top
    scrollBehavior() {
        $('.tooltip, .popover').tooltip('hide');

        return { x: 0, y: 0 };
    },

    routes,
});

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(VueRouter, VueHtmlToPaper, options);
...

Component

<template>
  <div>
    <loader v-if="loading" />
    <div v-else class="form-group row d-flex justify-content-center">
        <div class="col-10">
            <div id="printMe" class="card">
                <div class="card-header">
                    <div class="row d-flex align-items-center">
                        <div class="col">
                            Order details for: <span class="text-info">{{ 'PACK' + productOrder.id }}</span>
                        </div>
                        <div class="col d-flex justify-content-end">
                            <button class="btn btn-info" @click="print">Print</button>
                            ......

<script>
export default {
    data() {
        return {
            ...
            output: null
            ....

    methods: {
        print () {
            // Pass the element id here
            this.$htmlToPaper('printMe');
        },
       ...

Upvotes: 0

Views: 715

Answers (1)

Hiws
Hiws

Reputation: 10384

You can't register multiple plugins in one Vue.use.

Try replacing the line 

Vue.use(VueRouter, VueHtmlToPaper, options);

With

Vue.use(VueRouter);
Vue.use(VueHtmlToPaper, options)

Upvotes: 2

Related Questions