最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

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

programmeradmin3浏览0评论

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.

Share Improve this question edited Feb 5, 2021 at 14:28 Dan 63.2k18 gold badges111 silver badges119 bronze badges asked Feb 4, 2021 at 16:40 AndreasInfoAndreasInfo 1,2271 gold badge17 silver badges41 bronze badges
Add a ment  | 

2 Answers 2

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.

发布评论

评论列表(0)

  1. 暂无评论