uni-app 预览pdf文件
安卓uni-app实现pdf文件预览功能:
1.https://mozilla.github.io/pdf.js/getting_started/#download下载
放在根目录下,
2.新建一个webView页面
1 <template> 2 <view style="width: 100%;" > 3 <web-view :src="allUrl"></web-view> 4 </view> 5 </template> 6 7 <script> 8 export default { 9 data() { 10 return { 11 allUrl:'', 12 viewerUrl: '/hybrid/html/web/viewer.html', // 格式化文件流的一个js 文件 13 } 14 }, 15 onLoad(options) { 16 // encodeURIComponent 函数可把字符串作为 URI 组件进行编码。decodeURIComponent解码 17 let fileUrl = encodeURIComponent(decodeURIComponent(options.fileUrl)); 18 this.allUrl = this.viewerUrl + '?file=' + fileUrl 19 } 20 } 21 </script>
3.前一个页面增加跳转:
1 // 预览pdf 2 toViewFile(item) { 3 let fileUrl = `${this.baseUrl}/share/downloadFile?filePath=${item.filePath}&fileName=${item.fileName}`; 4 uni.navigateTo({ 5 url: '/pages/webView/webView?fileUrl='+ encodeURIComponent(fileUrl) 6 }); 7 },
由于url路径比较长,带有&符号,传参,&后面的会被截断,故需要加上encodeURIComponent。完美解决pdf无法打开问题。
相关网站:https://mozilla.github.io/pdf.js/getting_started/#download
https://blog.csdn.net/mwh_user/article/details/112368597
【预览pdf】:uniapp在微信小程序预览pdf,兼容安卓/IOS
https://blog.csdn.net/weixin_49521721/article/details/114064682?spm=1001.2101.3001.6650.1&utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7ECTRLIST%7ERate-1.pc_relevant_paycolumn_v3&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7ECTRLIST%7ERate-1.pc_relevant_paycolumn_v3&utm_relevant_index=2
分类:
uni-app
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· SQL Server 2025 AI相关能力初探
· Linux系列:如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列(二):开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 阿里最新开源QwQ-32B,效果媲美deepseek-r1满血版,部署成本又又又降低了!
· SQL Server 2025 AI相关能力初探
· 单线程的Redis速度为什么快?
· AI编程工具终极对决:字节Trae VS Cursor,谁才是开发者新宠?
· 开源Multi-agent AI智能体框架aevatar.ai,欢迎大家贡献代码