Vue：在组件中使用自定义库（pdf.js）

如何在 Vue 组件中使用供应商库（特别是我想使用 PDF.js）？ （我只想为这个特定组件加载它，因为它们是相当大的文件）

我正在构建一个需要加载 pdf 的编辑器。所以我将 pdf.js 和 pdf.worker.js 放在 /src/assets/vendor/pdfjs 中

然后我将两者加载到 template-editor-page.hbs 中，该模板也加载了该组件：

<div class="content">
  <div class="row fill">
    <div class="col-md-2 fill br pt30">
    </div>
    <div class="col-md-10 fill pt30 pl30 pr30">
      <div id="template-editor" class="template-editor">  
        <template-editor template-src="{{template.src}}"></template-editor>    
      </div>
    </div>
  </div>
</div>
<script src="/assets/js/template-editor.bundle.js"></script>
<script src="/assets/vendor/pdfjs/pdf.js"></script>
<script src="/assets/vendor/pdfjs/pdf.worker.js"></script>

我的 template-editor.js （我必须在这里加载它吗？）：

import Vue from 'vue';
import templateEditor from './components/template-editor.vue';

new Vue({
  el: '#template-editor',
  components: { templateEditor }
});

现在我想将文件加载到 template-editor.vue 中：

<template>
    <!-- ... -->
</template>

<script>

  export default {
    props: ['templateSrc'],
    name: 'template-editor',
    data() {
      return {
        src: this.templateSrc
      };
    },
    methods: {
      render() {
        PDFJS.getDocument(this.$data.src).then(function(pdf) {
          console.log(pdf);
        }, err => console.log(err));
      }
    },
    created: function() {
      this.render();
    }
  };
</script>

但我收到一条错误消息

ReferenceError: PDFJS is not defined

其他一切似乎都很顺利。我缺少什么？

我认为您的组件中缺少的只是一个 import 语句，

更正尝试在下面的导入位置使用“@”。我忘了，您的组件可能位于“src”的子文件夹中。另请参阅下面有关 pdfjs-dist 的注释。

<script>
  import { PDFJS } from '@/assets/vendor/pdfjs/pdf.js'

  export default {
    props: ['templateSrc'],
    name: 'template-editor',
    ...

选择

由于您有 webpack，您最好将 pdfjs-dist 安装到节点模块中（请参阅pdfjs-dist https://www.npmjs.com/package/pdfjs-dist），并将其从 './assets/vendor/pdfjs/pdj.js' 中删除

npm install pdfjs-dist

如果你这样做，导入会更加“标准”，

import { PDFJS } from 'pdfjs-dist'