uniApp移动端安卓中使用webview打开pdf文件是下载而不是预览解决方案

关键 使用到 pdf.js

第一步:

下载pdf.js 文件到项目根目录

也就是这个文件

附下载地址:uni-app-pdf: 在uni-app中使用pdf.js实现在手机上打开pdf

也可通过其他方法下载 如npm

第二步:

拷贝hybrid文件到项目根目录

第三步:

新建 viewPdf.vue文件

javascript 复制代码
<template>
		<view>
			<web-view :src="webViewSrc"></web-view>
		</view>
</template>

<script setup lang="ts">
	import { ref, getCurrentInstance } from 'vue';
	import config from "@/utils/http/config.js";
	import { onLoad } from '@dcloudio/uni-app';
	const { proxy } : any = getCurrentInstance()
	let Url = ref()
	Url.value = config.filesUrl.dev

	let webViewSrc = ref()

	let viewerUrl = '/hybrid/html/web/viewer.html'; // 根目录文件地址

	onLoad((option : any) => {
		 // option.url 从其他需要预览pdf文件的页面传入的url
		let deviceInfo = uni.getDeviceInfo()
		if (deviceInfo.platform !== 'ios') {
			//option.url  就是预览的pdf地址
			webViewSrc.value = `${viewerUrl}?file=${Url.value + option.url}`
		} else {
			// ios,直接访问pdf所在路径
			webViewSrc.value = Url.value + option.url
		}

	})

</script>
第四步:

使用

javascript 复制代码
<template>
        <view @click="change_pdf(file_url)"> 点击查看附件 </view>  //file_url pdf文件路径
</template>



<script setup lang="ts">
	function change_pdf(url : any) {
		uni.navigateTo({
			url: `/pages/index/viewPdf?url=${url}`
		})
	}
</script>

注:ios可省略步骤 直接使用<web-view :src="文件路径"></web-view> 即可

相关推荐
开开心心就好8 小时前
免费卸载工具,可清理残留批量管理启动项
linux·运维·服务器·windows·随机森林·pdf·1024程序员节
mysusheng10 小时前
2025年12月Z-Library电子书下载工具
pdf
CHB11 小时前
uni-app,你的最佳vibe coding搭子
uni-app·vibecoding
怀君14 小时前
Uniapp——Android离线打包自定义基座教程
android·uni-app
vfvfb16 小时前
pdf转图片 每一页转成图片 pdf转jpg
pdf·pdf每一页转成图片
YJlio17 小时前
Python 一键拆分 PDF:按“目录/章节”建文件夹 + 每页单独导出(支持书签识别&正文识别)
开发语言·python·pdf
李慕婉学姐17 小时前
【开题答辩过程】以《基于uni-app框架的助学管理系统的设计与实现》为例,不知道这个选题怎么做的,不知道这个选题怎么开题答辩的可以进来看看
微信小程序·uni-app
爱吃的强哥18 小时前
uni-app 开发微信小程序注意点
微信小程序·小程序·uni-app
热河暖男18 小时前
使用 Flying-Saucer-Pdf + velocity 模板引擎生成 PDF(解决中文和图片问题)
java·pdf·html·springboot
maogewang1 天前
清朝条约全集 PDF 电子版(三册合集):从尼布楚到辛丑,历史文献速存
pdf