找不到模块“vue-html-to-paper”的声明文件答案

【问题标题】：Could not find a declaration file for module 'vue-html-to-paper'找不到模块“vue-html-to-paper”的声明文件
【发布时间】：2020-12-20 21:06:55
【问题描述】：

我正在尝试获取一个使用 HTML 到 PDF 的示例项目，但我一直收到一条错误消息。

Could not find a declaration file for module 'vue-html-to-paper'

不过，在我的node_modules

index.js

import Vue from 'vue'
import VueRouter, { RouteConfig } from 'vue-router'
import VueHtmlToPaper from 'vue-html-to-paper';

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

组件

<template>
<div>
    <div>
        <h2>I am a H2 tag</h2>
    </div>
     <!-- SOURCE -->
    <div id="printMe">
      <h1>Print me!</h1>
      <div>&#x25A0; &#x25A0; &#x25A0; &#x25A0; &#x25A0; &#x25A0;</div>
    </div>
    <!-- OUTPUT -->
    <!-- https://printjs.crabbly.com/ -->
    <button @click="print">Click to print!</button>

</div>

</template>

<script lang="ts">
import Vue from 'vue';
import VueHtmlToPaper from 'vue-html-to-paper';

export default class TestComponent extends Vue {

  print () {
      // Pass the element id here
      this.$htmlToPaper('printMe');
    }

}
</script>

我已经删除了几次 node_modules 无济于事。有没有人在使用这个包之前遇到过这个问题？

package.json 文件

  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "docx": "^5.4.1",
    "vue": "^2.6.11",
    "vue-html-to-paper": "^1.3.1", <---- here
    "vue-router": "^3.2.0",
    "vuex": "^3.4.0"
  },

【问题讨论】：

标签： typescript vue.js vuejs2

【解决方案1】：

您确定该软件包已安装（又名：您可以发布您的 package.json）吗？似乎您的编辑器通过在软件包名称下划线来给出某种警告/错误，这可能表明那里有东西。

其次：如果你已经导入包并在 index.js 中注册到 Vue 中，则无需在组件中再次导入。

【讨论】：

截图中导入vue-html-to-paper的警告是什么？

【解决方案2】：

vue-html-to-paper 包没有任何类型声明文件 (*.d.ts)，因此您的应用程序必须使用 declare the module 本身。也就是说，要解决Could not find a declaration file 错误，请通过在src/shims-vue.d.ts 中添加以下行来声明vue-html-to-paper 模块：

declare module 'vue-html-to-paper';

使用插件的$htmlToPaper() method 到augment the Vue prototype，使用这些内容创建src/vue-html-to-paper.d.ts：

import Vue from 'vue';

interface HtmlToPaperOptions {
  name: string;
  specs: string[];
  replace: boolean;
  styles: string[];
}

declare module 'vue/types/vue' {
  interface Vue {
    $htmlToPaper: (el: Element, localOptions?: Partial<HtmlToPaperOptions>, cb?: () => boolean) => void;
  }
}

export {}

...然后restart VS Code's TypeScript Language Service（或者只是重新启动IDE本身）加载新的类型声明文件。

【讨论】：