uniapp 移动端 后台返回数据流 查看PDF

news2024/11/17 15:52:08

使用步骤:

1.官网下载地址pdf.js
在这里插入图片描述
2.在项目的根目录新建hybrid文件夹,将下载的pdf.js压缩包解压后,复制到hybrid下的html文件夹中
在这里插入图片描述
3.在page文件夹下新建一个filePreview.vue页面,页面代码如下:

<template>
	<view>
		<web-view :src="allUrl"></web-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				viewerUrl: '/hybrid/html/web/viewer.html',
				allUrl: ''
			}
		},
		onLoad(options) {
			this.allUrl = this.viewerUrl + '?file=' + options.url;
		},
		methods: {}
	}
</script>

<style>
</style>

4.从接口处拿到数据流进行处理,将数据流转化成base64,需要用到image-tools.js,引用uniapp插件市场转base64插件,插件代码如下:

function getLocalFilePath(path) {
	if (path.indexOf('_www') === 0 || path.indexOf('_doc') === 0 || path.indexOf('_documents') === 0 || path.indexOf(
			'_downloads') === 0) {
		return path
	}
	if (path.indexOf('file://') === 0) {
		return path
	}
	if (path.indexOf('/storage/emulated/0/') === 0) {
		return path
	}
	if (path.indexOf('/') === 0) {
		var localFilePath = plus.io.convertAbsoluteFileSystem(path)
		if (localFilePath !== path) {
			return localFilePath
		} else {
			path = path.substr(1)
		}
	}
	return '_www/' + path
}

function dataUrlToBase64(str) {
	var array = str.split(',')
	return array[array.length - 1]
}

var index = 0

function getNewFileId() {
	return Date.now() + String(index++)
}

function biggerThan(v1, v2) {
	var v1Array = v1.split('.')
	var v2Array = v2.split('.')
	var update = false
	for (var index = 0; index < v2Array.length; index++) {
		var diff = v1Array[index] - v2Array[index]
		if (diff !== 0) {
			update = diff > 0
			break
		}
	}
	return update
}

export function pathToBase64(path) {
	return new Promise(function(resolve, reject) {
		if (typeof window === 'object' && 'document' in window) {
			if (typeof FileReader === 'function') {
				var xhr = new XMLHttpRequest()
				xhr.open('GET', path, true)
				xhr.responseType = 'blob'
				xhr.onload = function() {
					if (this.status === 200) {
						let fileReader = new FileReader()
						fileReader.onload = function(e) {
							resolve(e.target.result)
						}
						fileReader.onerror = reject
						fileReader.readAsDataURL(this.response)
					}
				}
				xhr.onerror = reject
				xhr.send()
				return
			}
			var canvas = document.createElement('canvas')
			var c2x = canvas.getContext('2d')
			var img = new Image
			img.onload = function() {
				canvas.width = img.width
				canvas.height = img.height
				c2x.drawImage(img, 0, 0)
				resolve(canvas.toDataURL())
				canvas.height = canvas.width = 0
			}
			img.onerror = reject
			img.src = path
			return
		}
		if (typeof plus === 'object') {
			plus.io.resolveLocalFileSystemURL(getLocalFilePath(path), function(entry) {
				entry.file(function(file) {
					var fileReader = new plus.io.FileReader()
					fileReader.onload = function(data) {
						resolve(data.target.result)
					}
					fileReader.onerror = function(error) {
						reject(error)
					}
					fileReader.readAsDataURL(file)
				}, function(error) {
					reject(error)
				})
			}, function(error) {
				reject(error)
			})
			return
		}
		if (typeof wx === 'object' && wx.canIUse('getFileSystemManager')) {
			wx.getFileSystemManager().readFile({
				filePath: path,
				encoding: 'base64',
				success: function(res) {
					resolve('data:image/png;base64,' + res.data)
				},
				fail: function(error) {
					reject(error)
				}
			})
			return
		}
		reject(new Error('not support'))
	})
}

export function base64ToPath(base64) {
	return new Promise(function(resolve, reject) {
		if (typeof window === 'object' && 'document' in window) {
			base64 = base64.split(',')
			var type = base64[0].match(/:(.*?);/)[1]
			var str = atob(base64[1])
			var n = str.length
			var array = new Uint8Array(n)
			while (n--) {
				array[n] = str.charCodeAt(n)
			}
			return resolve((window.URL || window.webkitURL).createObjectURL(new Blob([array], { type: type })))
		}
		var extName = base64.split(',')[0].match(/data\:\S+\/(\S+);/)
		if (extName) {
			extName = extName[1]
		} else {
			reject(new Error('base64 error'))
		}
		var fileName = getNewFileId() + '.' + extName
		if (typeof plus === 'object') {
			var basePath = '_doc'
			var dirPath = 'uniapp_temp'
			var filePath = basePath + '/' + dirPath + '/' + fileName
			if (!biggerThan(plus.os.name === 'Android' ? '1.9.9.80627' : '1.9.9.80472', plus.runtime.innerVersion)) {
				plus.io.resolveLocalFileSystemURL(basePath, function(entry) {
					entry.getDirectory(dirPath, {
						create: true,
						exclusive: false,
					}, function(entry) {
						entry.getFile(fileName, {
							create: true,
							exclusive: false,
						}, function(entry) {
							entry.createWriter(function(writer) {
								writer.onwrite = function() {
									resolve(filePath)
								}
								writer.onerror = reject
								writer.seek(0)
								writer.writeAsBinary(dataUrlToBase64(base64))
							}, reject)
						}, reject)
					}, reject)
				}, reject)
				return
			}
			var bitmap = new plus.nativeObj.Bitmap(fileName)
			bitmap.loadBase64Data(base64, function() {
				bitmap.save(filePath, {}, function() {
					bitmap.clear()
					resolve(filePath)
				}, function(error) {
					bitmap.clear()
					reject(error)
				})
			}, function(error) {
				bitmap.clear()
				reject(error)
			})
			return
		}
		if (typeof wx === 'object' && wx.canIUse('getFileSystemManager')) {
			var filePath = wx.env.USER_DATA_PATH + '/' + fileName
			wx.getFileSystemManager().writeFile({
				filePath: filePath,
				data: dataUrlToBase64(base64),
				encoding: 'base64',
				success: function() {
					resolve(filePath)
				},
				fail: function(error) {
					reject(error)
				}
			})
			return
		}
		reject(new Error('not support'))
	})
}

5.页面展示如何处理,页面代码如下:

<template>
	<view>
		<button @click="receiveRenderData" class="app-view">查看PDF</button>
	</view>
</template>

<script>
	import { base64ToPath } from './image-tools.js';
	export default {
		data() {
			return { msg: '', allUrl: '' }
		},
		onLoad() {
			this.changeMsg()

		},
		methods: {
			changeMsg() {
				let datats = {} //传值
				var _this = this
				uni.request({
					url: '接口地址',
					data: datats,
					method: 'POST',
					responseType: 'arraybuffer',
					success: response => {
						if (!response) {
							uni.showToast({
								title: '协议预览失败',
								duration: 2000
							});
						}
						_this.msg = `data:application/pdf;base64,${uni.arrayBufferToBase64(response.data)}`;
					},
					fail: err => {
						console.log(err)
					}
				});
			},
			receiveRenderData(val) {
				console.log(this.msg)
				let result = this.msg.replace(/[\r\n]/g, '');
				let pdfBase64 = `data:application/pdf;base64,${result}`;
				this.allUrl = this.msg;
				base64ToPath(result)
					.then(path => {
					//转成本地地址
						var p = plus.io.convertLocalFileSystemURL(path);
						let keys = 'file://' + p;
						uni.navigateTo({ url: '../../pages/index/filePreview?url=' + keys })
					})
					.catch(error => {
						console.error(error)
					})
			}
		}
	}
</script>

<style>

</style>

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

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

相关文章

C#核心知识回顾——5.结构体和类区别、抽象类和接口、核心知识图解

1.结构体和类区别 结构体和类最大的区别是在存储空间上的&#xff0c;因为结构体是值&#xff0c;类是引用&#xff0c;因此他们的存储位置一个在栈上&#xff0c;一个在堆上。 结构体和类在使用上很类似&#xff0c;结构体甚至可以用面向对象的思想来形容一类对象。 结…

SQL题型:根据逗号拆分列

例1&#xff1a; 表&#xff1a; 要实现的结果&#xff1a; 代码&#xff1a; select a.id as hyId,substring_index(substring_index(a.ch_ry_mc, ,,b.help_topic_id 1 ),,, - 1) AS CH_RY_ID FROM rsgl_hygl_hyxx a JOIN mysql.help_topic b ON b.help_topic_id < ( l…

Acwing.835 Trie字符串统计 (trie数据结构)

题目 维护一个字符串集合&#xff0c;支持两种操作: 1."Ix"向集合中插入一个字符串x; 2."Qx”询问一个字符串在集合中出现了多少次。 共有N个操作&#xff0c;输入的字符串总长度不超过 1 0 5 10^5 105&#xff0c;字符串仅包含小写英文字母。 输入格式 第一…

ChatGPT 和爬虫有什么区别?

ChatGPT是一种基于人工智能的对话模型&#xff0c;它通过训练大量的文本数据来生成自然语言回复。它可以用于实现智能对话系统&#xff0c;能够理解用户的输入并生成相应的回复。ChatGPT的目标是模拟人类对话&#xff0c;使得对话更加流畅和自然。 而爬虫是一种用于自动化地从…

linux 操作系统内核态用户态

1. 32位系统一个进程最多有多少堆内存 对 32 位操作系统而言&#xff0c;它的寻址空间是4G&#xff08;2的32次方&#xff09;&#xff0c;Linux把它分为两部分&#xff1a;最高的1G(虚拟地址从0xC0000000到0xffffffff)用做内核本身&#xff0c;成为“内核空间”&#xff0c;而…

ESP32-C2(8684) AT固件程序

ESP32C2 AT固件使用 ESP32 C2模组&#xff0c;如图1-1所示 图1-1 ESP32 C2模组 ESP32 C2开发板&#xff0c;如图1-2所示 图1-2 ESP32 C2开发 方案亮点 1、完整的 WiFi 子系统&#xff0c;符合 IEEE 802.11b/g/n 协议&#xff0c;具有 Station 模式、SoftAP 模式、SoftAP Stat…

SAP BW/HANA 数据源创建示例

操作实例 在ABAP中创建&#xff1a; 1、RSO2——创建数据源——明明规则&#xff1a;ZZZ/BZ/HY_PP/MM/SD/FI_数据表名 如果表数据中存在货币或者数量关联不是本表需要走RFC提取 根据RFC提取&#xff1a; 函数组—ZBW_GROUP_FI 创建RFC&#xff1a;ZBW_FUN_ZCOT007E 代码&a…

(css)在网页上添加Live 2D网页二次元可动小人

(css)在网页上添加Live 2D网页二次元可动小人 效果&#xff1a; 代码&#xff1a; <script src"js/L2Dwidget.min.js"></script> <script src"js/L2Dwidget.0.min.js"></script> <script>L2Dwidget.init({"model&quo…

git学习使用笔记

一、git组成结构图 工作空间&#xff1a;用来保存项目的元数据和对象数据库的地方。 这是 Git 中最重要的部分&#xff0c;从其它计算机克隆仓库时&#xff0c;拷贝的就是这里的数据。本地索引&#xff1a;保存了下次将提交的文件列表信息&#xff0c;一般在 Git 仓库目录中。有…

【三维生成】Make-it-3D:diffusion+NeRF从单张图像生成高保真三维物体(上交微软)

题目: Make-It-3D: High-Fidelity 3D Creation from A Single Image with Diffusion Prior Paper: https://arxiv.org/pdf/2303.14184.pdf Code: https://make-it-3d.github.io/ 文章目录 前言一、方法1.第一阶段 Coarse Stage: Single-view 3D Reconstruction1.参考点的像素损…

制造企业实施MES系统受到的影响因素有哪些?

实施MES系统会遇到哪些影响因素&#xff1f;或者说企业实施MES系统的交付率为什么低&#xff1f; 我觉得关键点在于&#xff1a;在当前MES产品化程度普遍不高的大环境下&#xff0c;对项目及管理软件本身认知过于简单&#xff0c;且缺失有经验行业人才&#xff0c;是当前大部分…

机器学习复习5

机器学习复习 1 - 下面是你在课程中看到的代码&#xff0c;在哪种情况下你会使用二值交叉熵损失函数&#xff1f; model.compile(lossBinaryCrossentropy()) A. 回归任务(预测一个数字的任务) B. BinaryCrossentropy()不应该被用于任何任务 C. 有3个或更多类(类别)的分类任务 D…

力扣题库刷题笔记12--整数转罗马数字

1、题目如下&#xff1a; 2、个人Python代码实现&#xff1a; 3、题解Python代码实现&#xff1a; 与题解的差异主要在字典的设计以及题解第22行取余赋值的代码实现&#xff08;个人是使用转换成字符串&#xff0c;然后根据位数确定对应字符&#xff0c;相对来讲笨比了许多&…

【业务功能篇36】Springboot+activiti7 工作流引擎

业务场景&#xff1a;前段时间总结的有一个告警工单流程&#xff0c;我们都是直接自己建表&#xff0c;状态节点&#xff0c;操作节点&#xff0c;都是自定义设计的&#xff0c;而到后面会有很多的工单流程&#xff0c;比如创建一个遗留问题电子流&#xff0c;指定处理人进行分…

科技资讯|2023Q1中国电动汽车销量增长 29%,充电桩市场持续增长

根据市场调查机构公布的 2023 年第 1 季度中国国内电动汽车市场报告&#xff0c;比亚迪继续引领竞争日益激烈的电动汽车市场。 报告称 2023 年第 1 季度中国乘用电动汽车销量同比增长 29%&#xff0c;其中纯电动汽车&#xff08;BEV&#xff09;占销售额的近 70%、插电式混合…

python问题1:安装好ubuntu之后,可以使用python3命令,但是不能使用python命令

【问题】 安装好ubuntu之后&#xff0c;可以使用python3命令&#xff0c;但是不能使用python命令。 【分析】 这是因为/usr/bin下面只有python3命令&#xff0c;没有python命令。 sudo ln -s /usr/bin/python3 /usr/bin/python【解决】 做一个软链接。

Harris和Shi-tomasi角点检测笔记(详细推导)

角点 一般来说&#xff0c;角点就是极值点&#xff0c;在某些属性上强度最大或者最小的孤立点、线段的终点或拐点等。其实理解角点可以按照我们的直觉来理解&#xff0c;以下图为例&#xff0c;图中用颜色标注的地方都是角点&#xff1a; 原图地址&#xff1a;理解经典角点检测…

C#编写dll, VB6.0调用

本周有个任务&#xff0c;实现一个数据上传接口&#xff0c;要求是VB6.0实现。 麻烦的是数据需要DES加密&#xff0c;网上没找到现成的DES VB6实现&#xff0c;于是加密的部分用C#实现&#xff0c;VB6代码调用&#xff0c;折腾一番&#xff0c;参考网上的教程&#xff0c;记录…

基于matlab训练分类网络以对3D点云中的对象进行分类(附源码)

一、前言 示例介绍了中概述的方法&#xff0c;其中点云数据被预处理为体素化编码&#xff0c;然后直接与简单的 3-D 卷积神经网络架构一起使用以执行对象分类。在最近的方法中&#xff0c;点云数据的编码可能更加复杂&#xff0c;并且可以与执行分类/对象检测/分割任务的网络一…

07-图5 Saving James Bond - Hard Version

题目&#xff1a; This time let us consider the situation in the movie “Live and Let Die” in which James Bond, the world’s most famous spy, was captured by a group of drug dealers. He was sent to a small piece of land at the center of a lake filled with…