uniapp实现app的pdf预览

实现效果

文件准备

static下添加该pdf文件(下载地址:https://gitee.com/shallow-winds/resource_package/tree/master/方法一/html)

使用web-view进行展示:

在这里插入代码片`

复制代码
<web-view :src="url"></web-view>`
data() {
			return {
                url: '',
                viewerUrl: '/static/html/web/viewer.html?file=',
			}
		},

将viewerUrl与pdf地址进行拼接:

复制代码
getquery(id){
                uni.showLoading({
					title: '加载中'
				});
				this.$http.request({
					url: ``,
					method: 'post',
					
				}).then(res => {
					this.url = this.viewerUrl + res.data.articlesUrl
					uni.hideLoading();
				}).catch(res => {
				})
            }
相关推荐
看山是山_Lau3 分钟前
PDF书籍自动生成目录
pdf
Можно8 分钟前
pages.json 和 manifest.json 有什么作用?uni-app 核心配置文件详解
前端·小程序·uni-app
2403_8961775320 分钟前
怎么批量创建带不同名字的PDF?推荐4种批量创建带不同名字的PDF方法
pdf
2501_9151063224 分钟前
iOS 多技术栈混淆实现,跨平台 App 混淆拆解与组合
android·ios·小程序·https·uni-app·iphone·webview
爱看老照片26 分钟前
uniapp传递数值(数字)时需要使用v-bind的形式(加上冒号)
javascript·vue.js·uni-app
huycheaven1 小时前
uniapp-x生成App条形码和二维码
uni-app·二维码·条形码
00后程序员张1 小时前
有些卡顿不是 CPU 的问题,还要排查磁盘 I/O
android·ios·小程序·https·uni-app·iphone·webview
Aftery的博客1 小时前
HBulider项目打包上传到App Store需要的证书和私钥文件
uni-app·cocoapods
LXXgalaxy1 小时前
小程序文件上传怎么做?一套可复用的 UniApp 上传+预览 Demo
javascript·vue.js·uni-app
上单带刀不带妹2 小时前
UniApp 页面跳转完全指南:5 种路由方式详解与实战对比
前端·javascript·vue.js·uni-app·跨端开发