uniapp h5本地预览pdf教程 (含白屏|跨域解决方案)

第一步 下载pdf.js

很多pdf.js版本在真机ios环境都会白屏

经测试后2.5.207版本比较稳定,Android和IOS环境PDF文件都能加载成功

下载地址
 https://github.com/mozilla/pdf.js/releases/tag/v2.5.207icon-default.png?t=N7T8https://github.com/mozilla/pdf.js/releases/tag/v2.5.207
第二步 解压移动pdfjs文件至项目中
 

在根目录static中创建html文件夹 , 将解压出来的pdfjs文件移动至html文件夹目录下

第三步 创建pdf文件预览页面preview.vue
 

远程pdf文件地址可能会有跨域问题,这里使用转文件流的方式进行处理,可根据实际业务逻辑改写

<template><web-view :src="pdfUrl" v-if="pdfUrl"></web-view>
</template><script>import request from '@/common/request.js';export default {data() {return {viewerUrl: '/static/html/web/viewer.html', //用来渲染PDF的htmlpdfUrl: '' // 最终显示在web-view中的路径}},onLoad(option) {console.log('=>进入了PDF预览页面')console.log('获取的参数=>', option,decodeURIComponent(option.src))let url = decodeURIComponent(option.src)let data = {url}uni.showLoading({mask:true})//使用pdf网络地址请求文件流信息,解决跨域问题uni.request({url:request.baseUrl+'/h5/loadByUrl', //域名拼接data: data,method: 'post',responseType: 'arraybuffer', //这里记得设置响应数据格式,不然预览的pdf是空白header: {"authorization": uni.getStorageSync('token') // 携带的token},success: (response) => {uni.hideLoading()console.log(response)let pdfData = response.data; //pdfData是后端返回的文件流	//创建blob数据流let blob = new Blob([ pdfData], {type: 'application/pdf;charset=UTF-8'})pdfData = window.URL.createObjectURL(blob)this.pdfUrl = `${this.viewerUrl}?file=${decodeURIComponent(pdfData)}`;},})//若没有pdf网络地址跨域问题可直接加载pdf// this.pdfUrl = `${this.viewerUrl}?file=${decodeURIComponent(url)}`;},}
</script>

第四步  实际场景中获取pdf地址并跳转至预览页

uni.navigateTo({url:`/pages/index/preview?src=${encodeURIComponent(pdf网络地址)}`
})

预览效果

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

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

相关文章

C++(week15): C++提高:(五)Redis数据库

文章目录 零、Redis的安装、API1.redis、hiredis、redis-plus-plus安装2.HiRedis的API 一、Redis数据库的基本概念1.关系型数据库与非关系型数据库的区别2.非关系型数据库的分离3.Redis的概念4.Redis的特性5.Redis的优点 二、Redis常用命令三、Redis的五大数据类型及其命令1.st…

c++初阶-----STL---list

作者前言 &#x1f382; ✨✨✨✨✨✨&#x1f367;&#x1f367;&#x1f367;&#x1f367;&#x1f367;&#x1f367;&#x1f367;&#x1f382; ​&#x1f382; 作者介绍&#xff1a; &#x1f382;&#x1f382; &#x1f382; &#x1f389;&#x1f389;&#x1f389…

Datawhale AI夏令营第四期 魔搭-AIGC方向 task01笔记

目录 赛题内容 可图Kolors-LoRA风格故事挑战赛 baseline要点讲解(请配合Datawhale速通教程食用) Step1 设置算例及比赛账号的报名和授权 Step2 进行赛事报名并创建PAI实例 Step3 执行baseline Step4 进行赛题提交 微调结果上传魔搭 lora 调参参数介绍及 SD 的基础知识点…

ICETEK-DM6437-AICOM——CPU定时器及直流电机控制中断控制

一、设计目的&#xff1a; 1.1 CPU定时器程序设计&#xff1b; 1.2 2直流电机程序设计&#xff1b; 1.3 外中断。 二、设计原理&#xff1a; 2.1 定时器的控制&#xff1a; 在DM6437&#xff08;是一种数字信号处理器&#xff0c;DSP&#xff09;上使用其内部定时器和中断来…

JESD204B/C协议学习笔记

JESD204B基础概念 204B包含传输层&#xff0c;链路层&#xff0c;物理层。 应用层是对 JESD204B 进行配置的接口&#xff0c;在标准协议中是不含此层&#xff0c;只是为了便于理解&#xff0c;添加的一个层。 协议层指工程中生成的IP核JESD204B&#xff0c;负责处理输入的用户…

Java网络编程——简单的 API 调用

Get请求 - 无参数 上一章我们学习了网络的基本概念&#xff0c;我们知道 URL 能输入到浏览器地址栏中被打开&#xff0c; 那么能不能在程序中发送请求&#xff0c;获取结果呢&#xff1f; 例如“中国科学技术大学”的网站&#xff08;https://www.ustc.edu.cn/&#xff09;&a…

探索设计模式:观察者模式

探索设计模式&#xff1a;观察者模式 &#x1f9d0;观察者模式简介:gem:核心概念:rainbow:观察者模式的优点:truck:实现步骤1. 定义主题接口2. 实现观察者接口3. 具体主题实现4. 具体观察者实现5. 调用 :triangular_flag_on_post:总结 在实际开发过程中&#xff0c;设计模式的作…

【Hot100】LeetCode—124. 二叉树中的最大路径和

1- 思路 使用递归 dfs 实现① 递归思路&#xff1a;每次递归返回值为 &#xff0c; root.valMath.max(left,right) 从 左右孩子中挑选一个大的。② 递归公式&#xff1a;定义 sum&#xff0c;sum root.val left right 2- 实现 ⭐124. 二叉树中的最大路径和——题解思路 cl…

【矩阵对角线求和】求一个3*3矩阵对角线元素之和

求一个3*3矩阵对角线元素之和&#xff0c;使用C语言实现 具体代码&#xff1a; #include<stdio.h>int main(){float a[3][3],sum0;printf("请输入3x3矩阵的元素&#xff08;按行输入&#xff09;&#xff1a;\n");for(int i0;i<3;i){for(int j0;j<3;j)…

Java、PHP、Node 操作 MySQL 数据库常用方法

一、Java 操作 MySQL 数据库 1、Java 连接 MySQL 数据库 1. 使用 JDBC 驱动程序连接 使用这种方式&#xff0c;首先需要导入 MySQL 的 JDBC 驱动程序依赖&#xff0c;然后通过 Class.forName() 方法加载驱动程序类。其创建连接的过程相对直接&#xff0c;只需提供准确的数据库…

Tech Talk: SSD架构与功能模块详解

在之前的系列文章中&#xff0c;我们介绍了固态硬盘的系列知识&#xff0c;包括闪存的介质、原理&#xff0c;以及作为SSD大脑的控制器设计&#xff0c;本文将详细介绍SSD架构以及功能模块。 SSD架构简介 ◎SSD架构示意图 如上图所示&#xff0c;典型的SSD架构包括主机接口、SS…

点亮童梦思考之光,神秘伙伴震撼登场!

本文由 ChatMoney团队出品 介绍说明 咱们来聊聊“十万个为什么”机器人&#xff0c;这对小朋友来说&#xff0c;好处可多了去啦&#xff01; 小朋友们天生好奇&#xff0c;满脑子都是问号。 这个机器人就像个啥都懂的知识达人&#xff0c;不管他们问啥&#xff0c;都能给出答…

JVM知识总结(类加载器)

文章收录在网站&#xff1a;http://hardyfish.top/ 文章收录在网站&#xff1a;http://hardyfish.top/ 文章收录在网站&#xff1a;http://hardyfish.top/ 文章收录在网站&#xff1a;http://hardyfish.top/ 类加载器 Bootstrap引导类加载器 引导类加载器也被称为启动类加载…

麦田物语第二十天

系列文章目录 麦田物语第二十天 文章目录 系列文章目录一、构建地图信息系统二、生成地图数据 一、构建地图信息系统 我们上一节课已经做好了鼠标的显示&#xff0c;这节课需要构建地图的一些信息&#xff0c;例如&#xff1a;可挖坑&#xff0c;可丢弃物品等地区。我们点击地…

c语言学习,isdigit()函数分析

1&#xff1a;isdigit() 函数说明&#xff1a; 检查参数c&#xff0c;是否为0到9阿拉伯数字 2&#xff1a;函数原型&#xff1a; int isdigit(int c) 3&#xff1a;函数参数&#xff1a; 参数c&#xff0c;为检测整数 4&#xff1a;返回值&#xff1a; 参数c是阿拉伯码字符&…

【机器学习第8章——集成学习】

机器学习第8章——集成学习 8.集成学习8.1个体与集成弱分类器之间的关系组合时&#xff0c;如何选择学习器怎么组合弱分类器boosting和Bagging 8.2 BoostingAdaBoost算法步骤训练过程 8.3 Bagging与随机森林随机采样(bootstrap)弱学习器结合策略方差与偏差算法流程随机森林 8.4…

中职云计算实训室

一、实训室建设背景 随着信息技术的飞速发展&#xff0c;云计算已成为推动数字化转型、促进经济社会发展的重要力量。《中华人民共和国国民经济和社会发展第十四个五年规划和2035年远景目标纲要》明确提出&#xff0c;要加快数字化发展&#xff0c;建设数字中国。云计算作为数…

NLP——Transfromer 架构详解

Transformer总体架构图 输入部分&#xff1a;源文本嵌入层及其位置编码器、目标文本嵌入层及其位置编码器 编码器部分 由N个编码器层堆叠而成 每个编码器层由两个子层连接结构组成 第一个子层连接结构包括一个多头自注意力子层和规范化层以及一个残差连接 第二个子层连接结构包…

基于Java中的SSM框架实现远程同步课堂系统项目【项目源码+论文说明】计算机毕业设计

基于Java中的SSM框架实现远程同步课堂系统演示 远程同步课堂系统设计与实现 摘要&#xff1a;在这样一个网络数据大爆炸的时代&#xff0c;人们获取知识、获取信息的通道非常的多元化&#xff0c;通过网络来实现数据信息的获取成为了现在非常常见的一种方式&#xff0c;而通过…

MindSearch:用于增强网络搜索效率的开源人工智能

Web 信息查找与集成是搜索、检索、提取或集成 Web 资源以满足特定需求的活动&#xff0c;是实际生活中几乎所有领域中每个决策和解决问题的实体都必须执行的操作。 大型语言模型 (LLM) 与搜索引擎的集成重新定义了我们在网络上查找和使用信息的方式。因此&#xff0c;LLM 能够…