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）

回答

相关问题