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 ...
随机推荐
- Socket.D 网络应用协议,首版发布!
有用户说,"Socket.D 之于 Socket,尤如 Vue 之于 Js.Mvc 之于 Http" 主要特性 基于事件,每个消息都可事件路由 所谓语义,通过元信息进行语义描述 流 ...
- LeetCode 503:下一个更大的元素|| (单调栈 or 线段树)
解题思路: 1.单调栈:因为是循环数组,因此把数组复制三遍,ans 数组复制为2倍长,维护一个单调非递增的栈,栈保存的元素是元组(a[i] , i ),如果后面的值有比栈顶元素的值大,栈顶元素出栈,更 ...
- lottie 动画在 vue 中的使用
前言 最近我所负责的项目中,我采用了动画效果,并开始使用 gif 来实现.然而,在实践过程中,我发现 gif 格式的动画在 git 中出现了明显的锯齿感,这让我非常困扰.为了追求更完美的表现效果,我最 ...
- Spring Boot整合Spring Data连接postgreSQL完成简单的CRUD操作
导入jpa依赖和postgresql依赖: <!-- jpa依赖 --> <dependency> <groupId>org.springframework.boo ...
- 神经网络优化篇:详解指数加权平均数(Exponentially weighted averages)
指数加权平均数 比如这儿有去年伦敦的每日温度,所以1月1号,温度是40华氏度,相当于4摄氏度.世界上大部分地区使用摄氏度,但是美国使用华氏度.在1月2号是9摄氏度等等.在年中的时候,一年365天,年中 ...
- 防火墙添加允许服务器IP和端口方法
一.检测防火墙命令 systemctl status firewalld 如果显示如下active表示防火墙开启 ● firewalld.service - firewalld - dynamic f ...
- 基于GaussDB(DWS)的全文检索特性,了解一下?
摘要:全文检索是在互联网场景下应用非常广泛的特性,搜索引擎.站内搜索.电商搜索等场景下都会使用到,GaussDB(DWS)同样也支持全文检索功能,是基于GIN索引实现的,下面给大家详细介绍一下Gaus ...
- 如何正确使用Python临时文件
摘要:临时文件通常用来保存无法保存在内存中的数据,或者传递给必须从文件读取的外部程序.一般我们会在/tmp目录下生成唯一的文件名,但是安全的创建临时文件并不是那么简单,需要遵守许多规则. 1.前言 临 ...
- 每条你收藏的资讯背后,都离不开TA
摘要:云原生数据库GaussDB(for Redis)不仅提升了阅客的服务效率,让个性化推荐更快更稳,还降低了存储和改造成本,为企业未来发展奠定了云化基础,助力阅客实现更高质量的资讯触达. 随着互联网 ...
- 经典永流传,华为云媒体 AI 让老电影焕发新生
摘要:近日,在华为云TechWave全球技术峰会(人工智能&数据)上,马栏山视频文创产业园首席专家周苏岳受邀发表演讲<经典永流传,媒体 AI 让老电影焕发新生>,分享与华为云原生媒 ...