Vue: utiliser une librairie personnalisée (pdf.js) dans un composant

Question

Comment puis-je utiliser une librairie de fournisseur (en particulier, je veux utiliser PDF.js) dans un composant Vue? (Je ne veux que le charger pour ce composant spécifique car ce sont des fichiers plus volumineux)

Je construis un éditeur qui doit charger un pdf. Alors je mis les pdf.js et pdf.worker.js dans/src/assets/fournisseur/pdfjs

Puis je charge à la fois dans le modèle-rédacteur page.hbs qui charge également le composant:

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

mon modèle-editor.js (dois-je charger ici?):

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

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

maintenant, je veux charger le fichier dans mon modèle-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> 

Mais je reçois une erreur disant

ReferenceError: PDFJS is not defined 

Tout le reste semble fonctionner très bien. Qu'est-ce que je rate?

Answer 1

Au lieu de script balises pour vos scripts de fournisseurs, une meilleure utilisation webpacks fonction d'importation dynamique (https://webpack.js.org/guides/code-splitting/#dynamic-imports) pour charger cette bibliothèque de fournisseur dans votre fonction render:

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

Pour import travailler, vous devrez également installer ce babel plugin http://babeljs.io/docs/plugins/syntax-dynamic-import/.

Answer 2

Je pense que tout ce qui manque est une déclaration d'importation dans votre composant,

CORRECTION Essayez avec un « @ » dans l'emplacement d'importation ci-dessous. J'ai oublié, votre composant est probablement dans un sous-dossier de 'src'. Voir aussi la note ci-dessous à propos de pdfjs-dist.

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

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

Alternative

Puisque vous avez webpack, vous pourriez être mieux installer pdfjs-dist en modules de noeuds (voir pdfjs-dist) et le retirer de » ./assets/vendor/pdfjs /pdj.js'

npm install pdfjs-dist 

Si vous faites cela, l'importation est plus 'standard',

import { PDFJS } from 'pdfjs-dist' 

Answer 3

Merci pour votre aide les gars. Il s'avère que la réponse était cachée dans le premier extrait: j'importe les pdfjs APRÈS le paquet. Mais puisque le paquet a besoin, je dois importer AVANT:

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

Vraiment pas si compliqué que ça, après tout;)