[英]Vue: use a custom libary (pdf.js) in a component
How can I use a vendor libary (specifically I want to use PDF.js) in a Vue component? 如何在Vue组件中使用供应商库(特别是我要使用PDF.js)? (I only want to load it for this specific component as they are rather larger files) (我只想为此特定组件加载它,因为它们是相当大的文件)
I'm building an editor that needs to load a pdf. 我正在构建需要加载pdf的编辑器。 So I placed the pdf.js and pdf.worker.js in /src/assets/vendor/pdfjs 所以我将pdf.js和pdf.worker.js放在/ src / assets / vendor / pdfjs中
Then I load both in the template-editor-page.hbs that also loads the component: 然后,我同时加载了template-editor-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>
my template-editor.js (do I have to load it here?): 我的template-editor.js(我必须在这里加载吗?):
import Vue from 'vue';
import templateEditor from './components/template-editor.vue';
new Vue({
el: '#template-editor',
components: { templateEditor }
});
Now I want to load the file in my template-editor.vue: 现在,我想将文件加载到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>
But I get an error saying 但是我说错了
ReferenceError: PDFJS is not defined
Everything else seems to be working out fine. 其他一切似乎都正常。 What am I missing? 我想念什么?
Instead of script
tags for your vendor scripts, better use webpacks dynamic import feature ( https://webpack.js.org/guides/code-splitting/#dynamic-imports ) to load this vendor library in your render function: 最好使用webpacks动态导入功能( https://webpack.js.org/guides/code-splitting/#dynamic-imports )代替供应商脚本的script
标签,以在渲染函数中加载此供应商库:
render() {
import('/assets/vendor/pdfjs/pdf.js').then(PDFJS => {
PDFJS.getDocument(this.$data.src).then(function(pdf) {
console.log(pdf);
}, err => console.log(err));
}
}
For import
to work you will also have to install this babel plugin http://babeljs.io/docs/plugins/syntax-dynamic-import/ . 为了使import
正常进行,您还必须安装此babel插件http://babeljs.io/docs/plugins/syntax-dynamic-import/ 。
I think all that's missing is an import statement in your component, 我认为所缺少的只是您组件中的import语句,
CORRECTION Try with an '@' in the import location below. 更正在下面的导入位置尝试使用“ @”。 I forgot, your component is probably in a sub-folder of 'src'. 我忘记了,您的组件可能位于“ src”的子文件夹中。 Also see note below about pdfjs-dist. 另请参阅以下有关pdfjs-dist的注释。
<script>
import { PDFJS } from '@/assets/vendor/pdfjs/pdf.js'
export default {
props: ['templateSrc'],
name: 'template-editor',
...
Alternative 替代
Since you have webpack, you might be better off installing pdfjs-dist into node modules (see pdfjs-dist ), and removing it from './assets/vendor/pdfjs/pdj.js' 由于您具有webpack,因此最好将pdfjs-dist安装到节点模块中(请参阅pdfjs-dist ),然后将其从'./assets/vendor/pdfjs/pdj.js'中删除
npm install pdfjs-dist
If you do this, the import is more 'standard', 如果这样做,则导入将更“标准”,
import { PDFJS } from 'pdfjs-dist'
Thank's for your help guys. 感谢您的帮助。 Turns out the answer was hidden in the first snippet: I import the pdfjs AFTER the bundle. 原来答案隐藏在第一个代码段中:我在捆绑包之后导入pdfjs。 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 ;) 毕竟不是真的那么复杂;)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.