vue-officef实现pdf文件在线预览

一、参考网址
https://www.cnblogs.com/guozhiqiang/p/17957288

1、引入依赖


npm install @vue-office/pdf vue-demi

2、编写组件


<template><vue-office-pdf :src="pdf"/>
</template>
<script>
// import pdf from 'vue-pdf'
import VueOfficePdf from "@vue-office/pdf";
export default {name:'TestPdf',components:{VueOfficePdf},data(){return {// url: require('./pdf/2.pdf')//pdf:'http://static.shanhuxueyuan.com/test.pdf',//pdf:'/static/2.pdf',}}
}
</script><style scoped lang="less"></style>

注意：如果是本地文件需要将pdf放入public 文件下，如果放入其他文件下会报错

正确方式:
1、网络上pdf


<template><vue-office-pdf :src="pdf"/>
</template>
<script>
// import pdf from 'vue-pdf'
import VueOfficePdf from "@vue-office/pdf";
export default {name:'TestPdf',components:{VueOfficePdf},data(){return {// url: require('./pdf/2.pdf')pdf:'http://static.shanhuxueyuan.com/test.pdf',//pdf:'/static/2.pdf',}}
}
</script><style scoped lang="less"></style>

在这里插入图片描述

2、本地pdf


<template><vue-office-pdf :src="pdf"/>
</template>
<script>
// import pdf from 'vue-pdf'
import VueOfficePdf from "@vue-office/pdf";
export default {name:'TestPdf',components:{VueOfficePdf},data(){return {// url: require('./pdf/2.pdf')//pdf:'http://static.shanhuxueyuan.com/test.pdf',pdf:'/static/2.pdf',}}
}
</script><style scoped lang="less"></style>