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 => {
				})
            }
相关推荐
硕子鸽39 分钟前
UniApp + Dify 实战:详解 SSE 流式响应的解析与前端渲染
前端·uni-app·dify
2501_9159184142 分钟前
iOS 项目中证书管理常见的协作问题
android·ios·小程序·https·uni-app·iphone·webview
Miketutu43 分钟前
[特殊字符] uni-app App 端实现文件上传功能(基于 xe-upload 插件)
前端·vue.js·uni-app
焚 城1 小时前
uniapp 各种文件预览实现
vue.js·uni-app·html
weixin79893765432...1 小时前
uni-app 全面深入的解读
uni-app
2501_915918411 小时前
提升 iOS 应用安全审核通过率的一种思路,把容易被拒的点先处理
android·安全·ios·小程序·uni-app·iphone·webview
大卡拉米1 小时前
前端组件库 PDF、word、Excel预览
前端·pdf·word
00后程序员张1 小时前
APP如何快速上架Apple Store:完整上架流程与常见问题解析
android·小程序·https·uni-app·iphone·webview
ifeng09181 小时前
uniapp开发鸿蒙:跨端兼容与条件编译实战
华为·uni-app·harmonyos
ifeng09181 小时前
uniapp开发鸿蒙:常见问题与踩坑指南
华为·uni-app·harmonyos