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> 即可

相关推荐
ydjs678899-bot6 小时前
如何在Java中打印pdf静默打印和打印对话框选择
java·python·pdf
SamChan907 小时前
PDF 翻译后 1,250 变成 1.250,是错了吗?用 Python 核对数字格式
python·pdf·ocr·数据校验·文档翻译
开开心心就好10 小时前
打印机卡住打不了?一键清理卡死打印队列
服务器·开发语言·算法·pdf·ocr·idea·visual studio code
打工仔折腾 AI1 天前
在线PDF工具隐私焦虑?把BentoPDF部署到极空间NAS本地处理
人工智能·后端·python·pdf·ai agent 实战
霸道流氓气质1 天前
AI 简历制作平台:结构化输出解析、多模板渲染与 PDF 导出的 Vue3 + Spring AI 全栈实战
人工智能·spring·pdf
开开心心_Every1 天前
黄金价格软件国内外价格实时监控超方便
运维·服务器·游戏·智能手机·pdf·lua·perl
JasonSJX1 天前
DRM-X 5.0 PDF 保护更新:Windows 与 Mac 打印保留用户水印,ZJGet iOS 版支持 PDF 阅读
macos·pdf
2501_915921431 天前
iOS应用从开发到上架App Store的完整步骤详解
android·ios·小程序·https·uni-app·iphone·webview
shmily麻瓜小菜鸡2 天前
前端实现图片与PDF文字识别敏感信息打码方案
前端·pdf·状态模式
ComPDFKit2 天前
PDF 涂黑后还能复制?用 ComPDF 检查敏感文字是否真正删除
pdf