Vue：在組件中使用自定義庫（pdf.js）

-1

如何在Vue組件中使用供應商庫文件（特別是我想使用PDF.js）？（我只想加載它的這個特定的組件，因爲它們是相當大的文件）Vue：在組件中使用自定義庫（pdf.js）

我正在建立一個需要加載pdf的編輯器。所以我把pdf.js和pdf.worker.js在/ src目錄/資產/供應商/ 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>

我的模板editor.js內（我要在這裏加載它？）：

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

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

現在我想加載我的模板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

一切似乎工作正常。我錯過了什麼？

來源

2017-10-05 Pete

您正在使用的WebPack？ –

是module.exports = { entry：{ 'template-editor'：'./src/views/templates/template-editor/template-editor。js'} – Pete

而不是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工作，你也必須安裝此巴貝爾插件http://babeljs.io/docs/plugins/syntax-dynamic-import/。

來源

2017-10-05 07:13:31

謝謝，我試過了。但是，我得到的錯誤「'進口'和'出口'可能只出現在頂層」 – Pete

你配置babel做webpack中的transpiling嗎？ –

不確定。我沒有做初始設置。看起來像它雖然 – Pete

我認爲所有缺少的是在組件import語句，

修正嘗試用下面的導入位置的「@」。我忘了，你的組件可能在'src'的子文件夾中。另請參閱以下關於pdfjs-dist的註釋。

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

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

替代

既然你的WebPack，你可能會更好，從「./assets/vendor/pdfjs安裝pdfjs - 距離爲節點模塊（見pdfjs-dist），並刪除它/pdj.js'

npm install pdfjs-dist

如果你這樣做，進口更 '標準'，

import { PDFJS } from 'pdfjs-dist'

來源

2017-10-05 07:16:30

是的，我想我一直在嘗試。再給它一個鏡頭。它說：「無法找到模塊」./assets/vendor/pdfjs/pdf.js「有或沒有」。「。在前面btw。 – Pete

好吧，我已經注意到一個npm包可以做你想做的 - 只是要發佈一個編輯 –

所以我試過，但現在一些包不能找到（404）： GET http： //localhost:3000/templates/2878d994-4f58-40e8-b9d6-405733f400c1/js/0.bundle.js net :: ERR_ABORTED – Pete

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

真的不是所有的畢竟是複雜的;）

來源

2017-10-05 08:29:40 Pete

你不應該使用'' – async5

Vue：在組件中使用自定義庫（pdf.js）

回答

相關問題