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 预览pdf文件的更多相关文章
- 用pdf.js实现在移动端在线预览pdf文件
		用pdf.js实现在移动端在线预览pdf文件1.下载pdf.js 官网地址:https://mozilla.github.io/pdf.js/ 2.配置 下载下来的文件包,就是一个demo ... 
- 文档控件NTKO OFFICE 详细使用说明之预览PDF文件(禁止打印、下载、另存为、防抓包下载)
		1.在线预览PDF文件(禁止打印.下载.复制.另存为) (1) 运行环境 ① 浏览器:支持IE7-IE11(平台版本还支持Chrome和Firefox) ② IE工具栏-Internet 选项:将ww ... 
- 使用pdfjs插件在线预览PDF文件
		前言 本文介绍在html中使用 pdfjs插件在线预览PDF文件的方法. 实现步骤 下载 pdfjs 并引入项目中 到PDFJS官网 http://mozilla.github.io/pdf.js/g ... 
- html页面预览pdf文件使用插件pdfh5.js
		html预览pdf文件需要依赖pdf.js 移动端适配需要pdfh5.js 记录移动端适配pdfh5.js的用发 在线预览: https://www.gjtool.cn/pdfh5/pdf.html? ... 
- linux在线预览pdf文件开发思路
		准备:swftools,flexpaper 基本思路: 1,将pdf文件转化成swf文件 2,使用flexpaper预览swf文件 主要代码: 1,在linux中安装swftools.官网下载swft ... 
- ASP.NET MVC 项目直接预览PDF文件
		背景及需求 项目使用的是MVC4框架,其中有一个功能是根据设置生成PDF文件,并在点击时直接预览. 实现过程 1.第一版实现代码: HTML内容 @{ Layout = null; } <!DO ... 
- fis3+vue+pdf.js制作预览PDF文件或其他
		人生第一篇博客,的确有点紧张,但有些许兴奋,因为这对于我来说应该是一个好的开始,以此励志在技术的道路上越走越远. 看过了多多少少的技术博客,给自己带来了很多技术上的收获,也因此在想什么时候自己也可以赠 ... 
- 前端使用pdf.js预览pdf文件
		现在的浏览器基本都支持直接把pdf文件拖到浏览器就可以打开了,不用安装额外的插件.但是不同的浏览器显示的页面不一样.如果我们想在网页上统一预览pdf怎样实现呢? Mozilla开源了一个插件pdf.j ... 
- vue、Element  点击按钮以弹窗形式预览pdf文件
		直接上代码吧 <div > <el-button type="success" size="small" @click="isVie ... 
- 前端使用pdf.js预览pdf文件,超级简单
		现在的浏览器基本都支持直接把pdf文件拖到浏览器就可以打开了,不用安装额外的插件.但是不同的浏览器显示的页面不一样.如果我们想在网页上统一预览pdf怎样实现呢? Mozilla开源了一个插件pdf.j ... 
随机推荐
- 【Dotnet 工具箱】推荐一个 Flutter 和 .NET 开源的实时聊天 APP
			1. 推荐一个 Flutter 和 .NET 开源的实时聊天 APP Heyy-chat-app Heyy-chat-app 是一个开源的聊天应用,使用 Flutter.Asp.Net Core We ... 
- 华企盾DSC导致导出文件报错常见处理方法
			1.导出文件的进程和打开该文件的进程启用OLE控制是否都是未勾选,以及启用虚拟重定向是否设置一致(要么都勾选要么都不勾) 2.用procmon监控个人模式下导出非加密的文件,搜索writefile的进 ... 
- [简单] 基于注解玩转excel导出导入
			基于注解玩转excel导出导入 demo 请 加入 598347590 技术解决群获取 个人博客 https://yangbuyi.top 话不多说 开始 <!-- poi office --& ... 
- Odoo16—国际化翻译
			开发odoo系统模块的时候,如果一开始就有国际化的需求,无论是模型的定义还是视图的构建,建议使用英语作为第一语言:一方面,英语本身就是一种国际化的语言:另一方面,odoo内置模型字段描述如Create ... 
- Windows Server 2008 R2 & Windows Server 2012 R2 无法通过update更新的解决方法
			windows Server 2008 r2 无法通过update更新的解决方法 注意:目前windows Server系列操作系统已经完全停止支持. 1.安装 SP1补丁 KB976932 点击:微 ... 
- ESP32 IDF iic通信( 已验证) C语言
			关于iic原理建议B站自己看视频去, 然后本文主要实现了esp32的初始化, 写地址, 写数据, 读数据的功能, 从机的代码因为展示不需要,没写. 园子里面有个兄弟写了iic的代码.但是里面有点毒,多 ... 
- mysql的CRUD操作实现
			插入语句(INSERT):一旦我们选择了要插入的字段, 我们就必须保证要插入的数值和选择的字段的个数,顺序,类型一致. 1:怎么插入一条数据: INSERT INTO 插入的表名称(列名1,列 ... 
- git blame 用法小记
			1.概述 git管理的代码仓库,在协作开发中不可避免地会出现代码冲突,或者有新手错误地提交代码.出现问题不可怕,可怕的是找不到问题出在哪里.有时候找到出问题的代码,却不知道是谁提交的.git提供了一个 ... 
- GaussDB技术解读系列之SQL Audit,面向应用开发的SQL审核工具
			本文分享自华为云社区<GaussDB技术解读系列之SQL Audit,面向应用开发的SQL审核工具>,作者:华为云数据库和应用迁移专家. 前言 我们先从一个SQL语句说起(以某传统 ... 
- 视频编码耗时长、编码帧发送失败…DVPP视频编码问题典型案例分析
			摘要:本期就分享几个关于DVPP视频编码问题的典型案例,并给出原因分析及解决方法 本文分享自华为云社区<DVPP媒体数据处理视频编码问题案例>,作者:昇腾CANN. DVPP(Digita ... 
