vue-html-to-paper with Vue3

Question

我想试试 vue-html-to-paper，我根据文档做了最简单的设置。不过我正在使用 Vue3。

npm install vue-html-to-paper

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

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

我的组件：

<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>
[...]

在开发中，我在控制台 [...] Cannot set property '$htmlToPaper' of undefined [...] 中收到错误消息。我做错了什么？

谢谢，请指教。

Answer 1

它 uses Vue.prototype 所以它不能与 Vue 3 一起使用，除非它被修复。如果你想自己修复它，你可以 fork 存储库。

为此，替换这个 ❌:

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

这个 ✅ 适用于 Vue 2 和 Vue 3:

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

使用 Vue 3 安装插件时，请遵循 docs，但将 Vue.use 替换为 app.use。

vue-html-to-paper with Vue3

vue-html-to-paper with Vue3

javascript

printing

vue.js

vuejs3