安卓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文件的更多相关文章

  1. 用pdf.js实现在移动端在线预览pdf文件

    用pdf.js实现在移动端在线预览pdf文件1.下载pdf.js    官网地址:https://mozilla.github.io/pdf.js/ 2.配置    下载下来的文件包,就是一个demo ...

  2. 文档控件NTKO OFFICE 详细使用说明之预览PDF文件(禁止打印、下载、另存为、防抓包下载)

    1.在线预览PDF文件(禁止打印.下载.复制.另存为) (1) 运行环境 ① 浏览器:支持IE7-IE11(平台版本还支持Chrome和Firefox) ② IE工具栏-Internet 选项:将ww ...

  3. 使用pdfjs插件在线预览PDF文件

    前言 本文介绍在html中使用 pdfjs插件在线预览PDF文件的方法. 实现步骤 下载 pdfjs 并引入项目中 到PDFJS官网 http://mozilla.github.io/pdf.js/g ...

  4. html页面预览pdf文件使用插件pdfh5.js

    html预览pdf文件需要依赖pdf.js 移动端适配需要pdfh5.js 记录移动端适配pdfh5.js的用发 在线预览: https://www.gjtool.cn/pdfh5/pdf.html? ...

  5. linux在线预览pdf文件开发思路

    准备:swftools,flexpaper 基本思路: 1,将pdf文件转化成swf文件 2,使用flexpaper预览swf文件 主要代码: 1,在linux中安装swftools.官网下载swft ...

  6. ASP.NET MVC 项目直接预览PDF文件

    背景及需求 项目使用的是MVC4框架,其中有一个功能是根据设置生成PDF文件,并在点击时直接预览. 实现过程 1.第一版实现代码: HTML内容 @{ Layout = null; } <!DO ...

  7. fis3+vue+pdf.js制作预览PDF文件或其他

    人生第一篇博客,的确有点紧张,但有些许兴奋,因为这对于我来说应该是一个好的开始,以此励志在技术的道路上越走越远. 看过了多多少少的技术博客,给自己带来了很多技术上的收获,也因此在想什么时候自己也可以赠 ...

  8. 前端使用pdf.js预览pdf文件

    现在的浏览器基本都支持直接把pdf文件拖到浏览器就可以打开了,不用安装额外的插件.但是不同的浏览器显示的页面不一样.如果我们想在网页上统一预览pdf怎样实现呢? Mozilla开源了一个插件pdf.j ...

  9. vue、Element 点击按钮以弹窗形式预览pdf文件

    直接上代码吧 <div > <el-button type="success" size="small" @click="isVie ...

  10. 前端使用pdf.js预览pdf文件,超级简单

    现在的浏览器基本都支持直接把pdf文件拖到浏览器就可以打开了,不用安装额外的插件.但是不同的浏览器显示的页面不一样.如果我们想在网页上统一预览pdf怎样实现呢? Mozilla开源了一个插件pdf.j ...

随机推荐

  1. [HAOI2018] 字串覆盖

    [HAOI2018]字串覆盖 题目描述 小C对字符串颇有研究,他觉得传统的字符串匹配太无聊了,于是他想到了这 样一个问题. 对于两个长度为n的串A, B, 小C每次会给出给出4个参数s, t, l, ...

  2. nginx+lua+redis实现灰度发布

    前言: 授人以鱼不如授人以渔.先学会用,在学原理,在学创造,可能一辈子用不到这种能力,但是不能不具备这种能力.这篇文章主要是沉淀使用nginx+lua+redis实现灰度,当我们具备了这种能力,随时可 ...

  3. C++ Qt开发:StatusBar底部状态栏组件

    Qt 是一个跨平台C++图形界面开发库,利用Qt可以快速开发跨平台窗体应用程序,在Qt中我们可以通过拖拽的方式将不同组件放到指定的位置,实现图形化开发极大的方便了开发效率,本章将重点介绍QStatus ...

  4. ElasticSearch之禁用交换分区

    操作系统将进程加载至内存中执行时,对于当前未使用到的内存页,可能会将相关内存页交换至硬盘上,即swap. 对于性能敏感.时延敏感的应用程序比如ElasticSearch,swap特性会明显影响性能和稳 ...

  5. Python——第二章:列表的概念

    在编程中,列表(List)是一种常用的数据结构,用于存储一组有序的元素.列表是Python中的内置数据类型之一,它允许你在一个变量中存储多个值,并且这些值可以是不同的数据类型,包括整数.浮点数.字符串 ...

  6. 动态规划问题(三)最长递增子序列长度(LIS)

    问题描述 ​ 有一个数组,它内部的顺序是乱序的,现在要求你找出该数组中的最长的递增子序列长度. ​ 例如:对于数组 {10, 20, 9, 33, 21, 50, 41, 60, 80},它的最长递增 ...

  7. C++标准库中copy算法的使用

    目录 std::copy是C++标准库中的算法接口,主要用于两个容器间的复制,据说其效率要优于自己用for循环逐个复制.之前一直非常混淆其中的用法,这里总结了几个例子如下: #include < ...

  8. 一文带你掌握OBS的两种常见的鉴权方式

    摘要:本文就将带您了解OBS的两种常见的鉴权方式--Header携带签名和URL携带签名. OBS提供了REST(Representational State Transfer)风格API,支持您通过 ...

  9. 这场世界级的攻坚考验,华为云GaussDB稳过

    摘要:实践证明,华为云GaussDB完全经受住了这场世界级的攻坚考验,也完全具备支撑大型一体机系统迁移上云的能力,并积累了丰富的经验. 本文分享自华为云社区<这场世界级的攻坚考验,华为云Gaus ...

  10. 技术解读丨分布式缓存数据库Redis大KEY问题定位及优化建议

    摘要:如何定位分布式缓存数据库Redis大KEY问题,实操案例带你掌握优化方法. [背景] 访问Redis 5.0 cluster集群出现OOM报错,报错信息为(error) OOM command ...