javascript - vue-html-to-paper with Vue3 - Stack Overflow

admin管理员组

文章数量:1345393

I'd like to try out vue-html-to-paper and I did the simplest setup according to the documentation. I am using Vue3 though.

npm install vue-html-to-paper

//main.js
[...]
import VueHtmlToPaper from "vue-html-to-paper";

createApp(App)
  .use(VueHtmlToPaper)
  .mount("#app");

And my ponent:

<template>
  <div>
    <div id="example">
      Hello World
    </div>

    <button @click="print">
      Print
    </button>
  </div>
</template>

<script>
export default {
  name: "my_ponent",

  methods: {
    print: function() {
      this.$htmlToPaper("example");
    },
  },
</script>
[...]

On dev I get an error in console [...] Cannot set property '$htmlToPaper' of undefined [...]. What am I doing wrong?

Thanks, I'd appreciate a hint.

I'd like to try out vue-html-to-paper and I did the simplest setup according to the documentation. I am using Vue3 though.

npm install vue-html-to-paper

//main.js
[...]
import VueHtmlToPaper from "vue-html-to-paper";

createApp(App)
  .use(VueHtmlToPaper)
  .mount("#app");

And my ponent:

<template>
  <div>
    <div id="example">
      Hello World
    </div>

    <button @click="print">
      Print
    </button>
  </div>
</template>

<script>
export default {
  name: "my_ponent",

  methods: {
    print: function() {
      this.$htmlToPaper("example");
    },
  },
</script>
[...]

On dev I get an error in console [...] Cannot set property '$htmlToPaper' of undefined [...]. What am I doing wrong?

Thanks, I'd appreciate a hint.

• javascript
• vue.js
• printing
• vuejs3

Share Improve this question Follow edited Feb 5, 2021 at 14:28 Dan 63.2k1818 gold badges111111 silver badges119119 bronze badges asked Feb 4, 2021 at 16:40 AndreasInfoAndreasInfo 1,22711 gold badge1717 silver badges4141 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 9

It uses Vue.prototype so it won't work with Vue 3 unless that's fixed. You could fork the repo if you wanted to fix it yourself.

To do so, replace this ❌:

install (Vue, options = {}) {
    Vue.prototype.$htmlToPaper = (el, localOptions, cb = () => true) => {

with this ✅ which will work for both Vue 2 and Vue 3:

install (Vue, options = {}) {
    let globals = Vue.prototype || Vue.config.globalProperties;
    globals.$htmlToPaper = (el, localOptions, cb = () => true) => {

When installing the plugin with Vue 3, follow the docs but replace Vue.use with app.use.

I have rewritten the same npm package to be patible with Vue 3 in typescript. It's called paperizer. You can see full docs here.

The plugin is based from vue-html-to-paper and supports both position API (for those using script setup) and options API.

本文标签： javascriptvuehtmltopaper with Vue3Stack Overflow