vue-html-to-paper with Vue3

Question

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 component:

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

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

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

  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.

Dan · Accepted Answer · 2022-06-24T01:13:38.857

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.

edited Jun 24 '22 at 01:13

answered Feb 04 '21 at 17:12

Dan

59,490
13
101
110

1

Thanks Dan, you are a lifesaver. Found this one as well https://stackoverflow.com/questions/64824171/how-to-print-a-specific-element-in-vue-3 – AndreasInfo Feb 05 '21 at 14:20
How to fix it for Vue 3 Script setup. – Asif Mushtaq Jul 23 '22 at 22:43
@AsifMushtaq This is showing how to install it for Vue 3. It needs no fix for script setup which is also Vue 3. – Dan Jul 23 '22 at 22:59
@Dan can you confirm how I can access htmlToPaper function in script setup? – Asif Mushtaq Jul 23 '22 at 23:25

Mark Hermano · Answer 2 · 2023-06-09T09:13:08.013

1

I have rewritten the same npm package to be compatible 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 composition API (for those using script setup) and options API.

edited Jun 09 '23 at 09:13

answered Jun 08 '23 at 23:20

Mark Hermano

11
3

Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Jun 09 '23 at 07:00

vue-html-to-paper with Vue3

2 Answers2