Vue：在组件中使用自定义库（pdf.js） [英] Vue: use a custom libary (pdf.js) in a component

问题描述

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

How can I use a vendor libary (specifically I want to use PDF.js) in a Vue component? (I only want to load it for this specific component as they are rather larger files)

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

I'm building an editor that needs to load a pdf. So I placed the pdf.js and pdf.worker.js in /src/assets/vendor/pdfjs

然后我在template-editor-page.hbs中加载它们也加载组件：

Then I load both in the template-editor-page.hbs that also loads the component:

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

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

my template-editor.js (do I have to load it here?):

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

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

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

Now I want to load the file in my 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

其他一切似乎都在起作用好的。我错过了什么？

Everything else seems to be working out fine. What am I missing?

推荐答案

感谢您的帮助。事实证明，答案隐藏在第一个片段中：我在捆绑后导入pdfjs。但由于捆绑需要它，我需要在以前导入它：

Thank's for your help guys. Turns out the answer was hidden in the first snippet: I import the pdfjs AFTER the bundle. But since the bundle needs it, I need to import it BEFORE:

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

毕竟真的不是那么复杂;）

Really not all that complicated after all ;)

这篇关于Vue：在组件中使用自定义库（pdf.js）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！