需求:前端获取pdf文件地址后在移动端实现预览功能
实现效果
实现步骤
- 在项目文件static目录下添加资源文件
- 创建PDF预览页面viewPdf.vue
<template>
<view>
<web-view :src="fileUrl"></web-view>
</view>
</template>
<script>
import request from '@/utils/request/index'
export default {
data(){
return {
fileUrl:'',
// viewerUrl文件预览路径与文件所放位置相关
viewerUrl: '/static/html/web/viewer.html?file='
}
},
onLoad(option){
if(option.url){ //pdf文件路径,获取方式与实际项目相关
this.fileUrl = this.viewerUrl + option.url
}
}
}
</script>
<style>
</style>