Vue:在组件中使用自定义库 (pdf.js)
Vue: use a custom libary (pdf.js) in a component
如何在 Vue 组件中使用供应商库(特别是我想使用 PDF.js)? (我只想为这个特定组件加载它,因为它们是相当大的文件)
我正在构建一个需要加载 pdf 的编辑器。所以我把 pdf.js 和 pdf.worker.js 放在 /src/assets/vendor/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
其他一切似乎都很好。我错过了什么?
不要为您的供应商脚本添加 script
标签,最好使用 webpack 动态导入功能 (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
工作,你还必须安装这个 babel 插件 http://babeljs.io/docs/plugins/syntax-dynamic-import/。
我认为您的组件中缺少的只是一个 import 语句,
更正
在下面的导入位置尝试使用“@”。我忘了,你的组件可能在 'src' 的子文件夹中。另请参阅下面有关 pdfjs-dist 的注释。
<script>
import { PDFJS } from '@/assets/vendor/pdfjs/pdf.js'
export default {
props: ['templateSrc'],
name: 'template-editor',
...
备选
既然你有 webpack,你最好将 pdfjs-dist 安装到节点模块中(参见 pdfjs-dist),然后将其从 './assets/vendor/pdfjs/pdj.js'
中删除
npm install pdfjs-dist
如果你这样做,进口更多'standard',
import { PDFJS } from 'pdfjs-dist'
感谢你们的帮助。原来答案隐藏在第一个片段中:我在捆绑后导入 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>
其实并没有那么复杂 ;)
如何在 Vue 组件中使用供应商库(特别是我想使用 PDF.js)? (我只想为这个特定组件加载它,因为它们是相当大的文件)
我正在构建一个需要加载 pdf 的编辑器。所以我把 pdf.js 和 pdf.worker.js 放在 /src/assets/vendor/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
其他一切似乎都很好。我错过了什么?
不要为您的供应商脚本添加 script
标签,最好使用 webpack 动态导入功能 (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
工作,你还必须安装这个 babel 插件 http://babeljs.io/docs/plugins/syntax-dynamic-import/。
我认为您的组件中缺少的只是一个 import 语句,
更正 在下面的导入位置尝试使用“@”。我忘了,你的组件可能在 'src' 的子文件夹中。另请参阅下面有关 pdfjs-dist 的注释。
<script>
import { PDFJS } from '@/assets/vendor/pdfjs/pdf.js'
export default {
props: ['templateSrc'],
name: 'template-editor',
...
备选
既然你有 webpack,你最好将 pdfjs-dist 安装到节点模块中(参见 pdfjs-dist),然后将其从 './assets/vendor/pdfjs/pdj.js'
中删除npm install pdfjs-dist
如果你这样做,进口更多'standard',
import { PDFJS } from 'pdfjs-dist'
感谢你们的帮助。原来答案隐藏在第一个片段中:我在捆绑后导入 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>
其实并没有那么复杂 ;)