Vue:在组件中使用自定义libary (pdf.js)

Question

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

我正在构建一个需要加载pdf的编辑器。因此，我将pdf.js和pdf.worker.js放在/src/pdf.worker.js/供应商/pdfjs中。

然后，我在同时加载组件的模板编辑器-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>

to (我必须在这里加载它吗？)：

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

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

现在，我想将文件加载到我的模板-editor.vue or.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

其他的一切似乎都很顺利。我遗漏了什么？

Answer 1

谢谢你们的帮助。结果答案隐藏在第一个片段中:我在包之后导入pdfjs。但是由于包需要它，所以我需要在此之前导入它：

<script src="/assets/vendor/pdfjs/pdf.js"></script>
<script src="/assets/vendor/pdfjs/pdf.worker.js"></script>
<script src="/assets/js/template-editor.bundle.js"></script>

其实并不是那么复杂;)

Answer 2

我认为所缺少的只是组件中的一个导入语句，

更正尝试在下面的导入位置使用“@”。我忘了，你的组件可能在“src”的子文件夹中。还请参见下面关于的注意事项。

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

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

替代

既然您有webpack，您最好将pdfjs安装到节点模块(请参阅pdfjs-dist)，并将其从‘./资产/供应商/pdfjs/pdj.js’中删除。

npm install pdfjs-dist

如果你这样做的话，进口就更“标准”了，

import { PDFJS } from 'pdfjs-dist'

Answer 3

与用于供应商脚本的script标记不同，最好使用webpacks动态导入功能(https://webpack.js.org/guides/code-splitting/#dynamic-imports)在您的呈现函数中加载这个供应商库：

render() {
    import('/assets/vendor/pdfjs/pdf.js').then(PDFJS => {
        PDFJS.getDocument(this.$data.src).then(function(pdf) {
          console.log(pdf);
        }, err => console.log(err));
    }
}

要使import工作，您还必须安装这个babel插件http://babeljs.io/docs/plugins/syntax-dynamic-import/。