初步使用:
1. 安装
yarn add vue-pdf 或者 npm install vue-pdf
2. 引入,注册,使用
testPdf下的index.vue
<template>
<div>
<!--使用刚刚注册好的testPdf组件 *** 注意,这里的new.pdf是放在public下的PDF文件夹下的pdf文档。-->
<test-pdf src="./PDF/new.pdf" class="testpdf-outside"></test-pdf>
</div>
</template>
<script>
import testPdf from 'vue-pdf' //* ** 引入vue-pdf
export default {
components: {
testPdf // ***组件式注册,引入的vue-pdf
}
}
</script>
<style scoped lang="scss">
.testpdf-outside{
min-width:800px;
}
</style>
存储Vue项目中的public下的new.pdf文件打开的效果,如图:
vue项目运行起来的PDF预览效果,如图: