uniapp实现app的pdf预览

最新推荐文章于 2025-10-28 14:05:06 发布

原创最新推荐文章于 2025-10-28 14:05:06 发布 · 938 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#uni-app #pdf

实现效果

文件准备

static下添加该pdf文件（下载地址：https://gitee.com/shallow-winds/resource_package/tree/master/%E6%96%B9%E6%B3%95%E4%B8%80/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 => {
				})
            }