安卓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. 吉特日化MES系统&生产工艺控制参数对照表

    吉特日化MES生产工艺参数对照表 工艺编号 PROCE_BASE_TIMER 工艺名称 定时器 工艺说明 主要用于生产工艺步骤过程计时 参数编号 参数名称 参数描述 Prop_Timer_Enable ...

  2. 【教程】浅谈ios混淆和加固加密

    ​ 混淆: 针对项目代码,代码混淆通常将代码中的各种元素(变量.函数.类名等)改为无意义的名字,使得阅读的人无法通过名称猜测其用途,增大反编译者的理解难度. 虽然代码混淆可以提高反编译的门槛,但是对开 ...

  3. 数据仓库主流开发语言——SQL

    数仓开发语言概述  SQL语言介绍 数仓与SQL 结构化数据 二维表结构 SQL语法分类

  4. 测试member和coupon的远程调用

    测试member和coupon的远程调用 想要获取当前会员领取到的所有优惠券.先去注册中心找优惠券服务, 注册中心调一台优惠券服务器给会员,会员服务器发送请求给这台优 惠券服务器,然后对方响应. Fe ...

  5. Object类、String和StringBuffer、Math类、日期处理类

    1.Object类 "万物皆对象":(1)从类和对象角度:任何具体事物都是一个对象,. (2)Object类,类似"东西".所有的类都继承了Object类. 使 ...

  6. 用C#实现简单的线性回归

    前言 最近注意到了NumSharp,想学习一下,最好的学习方式就是去实践,因此从github上找了一个用python实现的简单线性回归代码,然后基于NumSharp用C#进行了改写. NumSharp ...

  7. 5G多输入多输出技术,到底是个啥东东?

    摘要:多输入多输出技术是指在发射端和接收端分别使用多个发射天线和接收天线,使信号通过发射端与接收端的多个天线传送和接收,从而改善通信质量. 本文作者|历天一 多输入多输出技术是指在发射端和接收端分别使 ...

  8. 华为云企业级Redis揭秘第17期:集群搭载多DB,多租隔离更降本

    摘要:GaussDB(for Redis)支持真正可扩展的多DB,轻松实现降本增效. 本文分享自华为云社区<华为云企业级Redis揭秘第17期:集群搭载多DB,多租隔离更降本>,作者: G ...

  9. 教你如何在Spark Scala/Java应用中调用Python脚本

    摘要:本文将介绍如何在 Spark scala 程序中调用 Python 脚本,Spark java程序调用的过程也大体相同. 本文分享自华为云社区<[Spark]如何在Spark Scala/ ...

  10. 万字讲解WiFi为何物

    摘要:WiFi是一种基于IEEE802.11系列协议标准实现的无线通信技术. 本文分享自华为云社区<[云驻共创]物联网无线短距离Wi-Fi技术专题>,作者:Mr红凯. 前言 Wi-Fi通往 ...