uniapp android和微信小程序实现PDF在线预览

    在使用uniapp开发移动端时,微信开发者工具里webview能正常打开后端接口返回的pdf文件流。正式发布后,在配置了业务域名和服务器域名的前提下,预览pdf文件却只能看到白屏,因此我猜测微信小程序不能通过webview读取文件流。这个想法有问题的话请大家给与指正。

     后来我通过uniapp api将文件下载在临时目录,再调用api打开,实现了微信小程序的预览。但在安卓端会调用安装的WPS打开,如果用户没有安装pdf阅读器,则无法打开,造成了不好的用户体验。因此,手机端我用pdf.js实现在线预览。

后端的api接口如下:

/*** @功能:pdf预览*/@IgnoreAuth@RequestMapping("/pdf/preview/**")public void pdfPreviewIframe(HttpServletRequest request, HttpServletResponse response) {String imgPath = extractPathFromPattern(request);// 其余处理略InputStream inputStream = null;OutputStream outputStream = null;try {inputStream = MinioUtil.getMinioFile(imgPath);outputStream = response.getOutputStream();response.setContentType("application/pdf; charset=UTF-8");byte[] buf = new byte[1024];int len;while ((len = inputStream.read(buf)) > 0) {outputStream.write(buf, 0, len);}response.flushBuffer();} catch (Exception e) {log.error("预览文件失败" + e.getMessage());} finally {if (inputStream != null) {try {inputStream.close();} catch (IOException e) {log.error(e.getMessage(), e);}}if (outputStream != null) {try {outputStream.close();} catch (IOException e) {log.info("imgPath:{}", imgPath);log.error(e.getMessage(), e);}}}}

一、下载pdf.js

http://mozilla.github.io/pdf.js/getting_started

二、解压文件并引入到项目

说明:网上很多案例说,在项目目录下创建hybrid文件夹,把解压后的文件全部放到里面的方式我试了后行不通。

在static目录下新建pdfview目录,将解压后的文件拷贝到该目录下。如下图所示:

注释viewer.mjs代码,pdf.js不支持加载跨域文件,会报 “file origin does not match viewer’”错误:

三、 webview内预览pdf

<template><view><web-view :src="fileUrl"></web-view></view>
</template><script>export default {data() {return {fileUrl: "",pdfViewUrl: '/static/pdfview/web/viewer.html'}},onLoad(options) {this.fileUrl = decodeURI(options.fileUrl)if (!!options.isPdfView) {this.fileUrl = this.pdfViewUrl + '?file=' + encodeURI(this.fileUrl)}},methods: {}}
</script><style></style>

 四、app、微信小程序分别预览

//pdf预览pdfView(item) {uni.showLoading({title: '加载中...'})item.fileUrl = this.baseFileURL + '/pdf/preview/' + item.resourceId// #ifdef APP-PLUSuni.navigateTo({url: '/subpages/webview/webview?fileUrl=' + encodeURI(item.fileUrl) + "&isPdfView=true",})// #endif//  #ifdef MP-WEIXINlet fileName = item.resourceId.substring(item.resourceId.lastIndexOf('/') + 1);uni.downloadFile({url: item.fileUrl, //文件地址filePath: wx.env.USER_DATA_PATH + '/' + fileName,success: function(res) {const filePath = res.filePath || res.tempFilePath;uni.openDocument({filePath: filePath,showMenu: false,success: function(res) {}});}});// #endifuni.hideLoading()},

五:预览效果

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/667769.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

python接口自动化(五)--接口测试用例和接口测试报告模板(详解)

简介 当今社会在测试领域&#xff0c;接口测试已经越来越多的被提及&#xff0c;被重视&#xff0c;而且现在好多招聘信息要对接口测试提出要求。区别于传统意义上的系统级别测试&#xff0c;很多测试人员在接触到接口测试的时候&#xff0c;也许对测试执行还可以比较顺利的上手…

flink实战--flink的job_listener使用解析

背景 生产环境可能有如下的需求:当一个flink作业提交完成或者是运行中不定时给我们触发某个接口或发送一个消息,然后我们在做其他的操作,尤其是batch作业。 flink的job_listener就可以满足我们监听flink任务提交和运行状态的需求,具体如何使用本文将全面介绍一下。 注册入…

C2-Search-Netlas:一款基于Netlas API的强大C2服务器识别与检测工具

关于C2-Search-Netlas C2-Search-Netlas是一款功能强大的命令与控制&#xff08;C2&#xff09;服务器检测工具&#xff0c;该工具使用Java语言开发&#xff0c;基于Netlas API实现其功能&#xff0c;可以帮助广大研究人员轻松快速地识别和检测目标C2服务器的相关信息。 C2-S…

C++:通过count和find判断vector中是否包含某个数据

vector本身没有提供可以检测某个数据是否在其中的成员方法&#xff0c;可以使用泛型方法count和find进行检查&#xff1a; #include <iostream> #include <vector> #include <algorithm> using namespace std;int main() {vector<int> d{1, 2, 2, 2, …

nginx flv模块的使用和源码分析

这里写自定义目录标题 1. 为什么需要ngx_http_flv_module2. 配置指令3. 加载ngx_http_flv_module 模块4. 源码分析4.1 指令分析4.2 ngx_http_flv_handler处理函数 5. 如何请求flv进行验证6. 思考 1. 为什么需要ngx_http_flv_module 毋庸多说&#xff0c;就是为了提供在线的http…

Redis之基础篇

Redis简介 Redis是一种基于键值对&#xff08;Key-Value&#xff09;的NoSQL数据库&#xff0c;它支持string&#xff08;字符串&#xff09;、hash&#xff08;哈希&#xff09;、list&#xff08;列表&#xff09;、set&#xff08;集合&#xff09;、zset&#xff08;有序集…

Java后端面试总结

Java语言具有哪些特点? Java为纯面向对象的语言。它能够直接反应现实生活中的对象。 具有平台无关性。java利用Java虚拟机运行字节码,无论是在Windows、Linux还是MacOS等其它平台对Java程序进行编译,编译后的程序可在其它平台运行。 Java为解释型语言,编译器把Java代码编译…

随机图论基础

一&#xff0c;随机图、随机图空间 1&#xff0c;随机图 一个n个点的无向图&#xff0c;最多有sn(n-1)/2条边。 每条边都有一定的概率存在&#xff0c;有一定概率不存在&#xff0c;那么每个图都有一个出现概率。 2&#xff0c;随机图空间 一共有2^s种不同的图&#xff0c…

[word] word怎么让字在横线上居中 #学习方法#媒体#媒体

word怎么让字在横线上居中 word怎么让字在横线上居中&#xff1f; 在word文档中&#xff0c;有时为了某些字句突出显示&#xff0c;需要用下划线来表示&#xff0c;当着重显示部分为金额、面积或某些选项时&#xff0c;需要一条长下划线上左右有空白&#xff0c;而文字在下划…

Linux下对线程的理解(上)

1、线程的概念 要理解线程首先要理解页表和进程地址空间&#xff0c;我是这样子理解的&#xff0c;1、进程地址空间是进程访问资源的窗口。2、页表是规定进程地址空间中哪些属于进程。3、合理的使用进程地址空间页表可以对资源进行划分。而如何理解进程呢&#xff1f;进程是接受…

算法题目题单——图论

简介 本文为自己做的一部分图论题目&#xff0c;作为题单列出&#xff0c;持续更新。 题单由题目链接和题解两部分组成&#xff0c;题解部分提供简洁题意&#xff0c;代码仓库&#xff1a;Kaiser-Yang/OJProblems。 对于同一个一级标题下的题目&#xff0c;题目难度尽可能做…

【vscode】windows11在vscode终端控制台中打印console.log()出现中文乱码问题解决

1. 问题描述 在前端开发过程中使用vscode编写node.js&#xff0c;需要在控制台中打印一些中文信息&#xff0c;但是一直出现中文乱码问题&#xff0c;英文和数字都显示正常。在网上试了很多设置的办法&#xff0c;最终找到windos11设置中解决。 2. 原因 首先打开控制台&…

centos 7.7 离线安装docker

centos 7.7 离线安装docker Index of linux/static/stable/x86_64/https://download.docker.com/linux/static/stable/x86_64/ 【1】离线下载docker 压缩包上传至 /usr/local 目录&#xff0c;解压缩&#xff0c;并复制到 /usr/bin/ 目录中。 cd /usr/local/tar -zxvf docke…

力扣 第 123 场双周赛 解题报告 | 珂学家 | 二维偏序+单调队列优化

前言 执手看歌敲金钗&#xff0c;笑语落珠明眸睐。 忽然蝴蝶春风满&#xff0c;焉教冷镜瘦朱颜。 整体评价 T3是基于map的前缀和的变形题&#xff0c;T4是二维偏序的一道应用题。 题外话&#xff0c;力扣还是实现N久之前的承诺了&#xff0c;命名权奖励&#xff0c;赞一个。 …

7隐藏进程_Linux_Rootkit.md

Xcellerator 密码学Linux其他逆向工程 文章目录 [Linux Rootkit 第 7 部分&#xff1a;隐藏进程](https://xcellerator.github.io/posts/linux_rootkits_07/)选择要隐藏的 PID隐藏 PID Linux Rootkit 第 7 部分&#xff1a;隐藏进程 2020-10-01 :: TheXcellerator # linux #…

Python调用pyspark报错整理

前言 Pycharm配置了SSH服务器和Anaconda的python解释器&#xff0c;如果没有配置可参考 大数据单机学习环境搭建(8)Linux单节点Anaconda安装和Pycharm连接 Pycharm执行的脚本 执行如下 pyspark_model.py 的python脚本&#xff0c;构建SparkSession来执行sparksql "&qu…

学习的数据结构和算法第2天

数据结构 ​ 是计算机储存、组织数据的方式&#xff0c;指相互之间存在一种或多种特定关系的数据元素 利用一些方式实现一些项目在内存中奖数据存储起来。 1、数组 2、链表 3、树 算法 ​ 就是定义良好的计算过程&#xff0c;它取一个或一组的值为输入&#xff0c;并…

Quartus IP 之mif与hex文件创建与使用

一、mif与hex概述 ROM IP的数据需要满足断电不丢失的要求&#xff0c;ROM IP数据的文件格式一般有三种文件格式&#xff1a;.mif、.hex、.coe&#xff0c;Xilinx与Intel Altera支持的ROM IP数据文件格式如下&#xff1a; Xilinx与Altera支持的ROM文件格式 Alterahex、mifAM&am…

pwn学习笔记(2)

pwn学习笔记&#xff08;2&#xff09; 1.三种常见的寄存器&#xff1a; ​ ax寄存器&#xff1a;通用寄存器&#xff0c;可用于存放多种数据 ​ bp寄存器&#xff1a;存放的是栈帧的栈底地址 ​ sp寄存器&#xff1a;存放的是栈顶的地址 2.栈帧与栈工作的简介&#xff1a…

Objective-C 中的SEL

在 Objective-C 中&#xff0c;SEL&#xff08;Selector&#xff09;是一种用来表示方法的类型。 它实际上是一个指向方法的指针&#xff0c;用于在运行时动态调用方法。 下面是一个使用 SEL 的代码示例&#xff1a; #import <Foundation/Foundation.h>interface MyCl…