使用“Vue HTML to Paper”单击“打印”按钮时出错

Question

我有一个vue 应用程序，我正在尝试实现“Vue HTML to Paper”。

我已按照https://randomcodetips.com/vue-html-to-paper/ 上的所有说明进行操作，但是当我单击“打印”按钮时出现以下错误。

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);
...

组件

<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');
        },
       ...

Answer 1

您不能在一个Vue.use 中注册多个插件。

换行试试

Vue.use(VueRouter, VueHtmlToPaper, options);

有

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