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

使用步骤:

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 = 0function getNewFileId() {return Date.now() + String(index++)
}function biggerThan(v1, v2) {var v1Array = v1.split('.')var v2Array = v2.split('.')var update = falsefor (var index = 0; index < v2Array.length; index++) {var diff = v1Array[index] - v2Array[index]if (diff !== 0) {update = diff > 0break}}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 = rejectfileReader.readAsDataURL(this.response)}}xhr.onerror = rejectxhr.send()return}var canvas = document.createElement('canvas')var c2x = canvas.getContext('2d')var img = new Imageimg.onload = function() {canvas.width = img.widthcanvas.height = img.heightc2x.drawImage(img, 0, 0)resolve(canvas.toDataURL())canvas.height = canvas.width = 0}img.onerror = rejectimg.src = pathreturn}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.lengthvar 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() + '.' + extNameif (typeof plus === 'object') {var basePath = '_doc'var dirPath = 'uniapp_temp'var filePath = basePath + '/' + dirPath + '/' + fileNameif (!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 = rejectwriter.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 + '/' + fileNamewx.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 = thisuni.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.hqwc.cn/news/8759.html

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

相关文章

让浮动元素在一行显示

&#x1f4dd;个人主页&#xff1a;爱吃炫迈 &#x1f48c;系列专栏&#xff1a;HTMLCSS &#x1f9d1;‍&#x1f4bb;座右铭&#xff1a;道阻且长&#xff0c;行则将至&#x1f497; <div class"wrap"><div class"item">1</div><di…

java项目之疫情期间医院门诊管理系统ssm源码+文档

风定落花生&#xff0c;歌声逐流水&#xff0c;大家好我是风歌&#xff0c;混迹在java圈的辛苦码农。今天要和大家聊的是一款基于ssm的疫情期间医院门诊管理系统。项目源码以及部署相关请联系风歌&#xff0c;文末附上联系信息 。 &#x1f495;&#x1f495;作者&#xff1a;风…

网络协议与攻击模拟-15-DNS协议

DNS 协议 1、了解域名结构 2、 DNS 查询过程 3、在 Windows server 上部署 DNS 4、分析流量 实施 DNS 欺骗 再分析 一、 DNS 1、概念 ● DNS ( domain name system &#xff09;域名系统&#xff0c;作为将域名的 IP 地址的相互映射关系存放在一个分布式的数据库&#xff0…

adb 常用命令解析

查询设备列表 adb devices 安装应用app adb install xx.apk 卸载应用app adb uninstall [-k] 查看安装的app包名 adb shell pm list packages 查看前台 Activity adb shell dumpsys activity activities | grep mFocusedActivity 查看当前正在运行的APK的包名 adb shell dumpsy…

BlazorServer非鉴权的登录和注册

BlazorServer入门 简单的登录与注册的设计 &#x1f383; 前言&#xff1a; 为了简单起见&#xff0c;本文不采用Autherize标签等直接可用的工具来实现登录和注册的设计。 现创建一个BlazorServer模板,使用的.Net Core版本为3.1。 &#x1f3ab;Blazor需要创建页面(组件)时请直…

前端vue入门(纯代码)20

总以为自己还很年轻&#xff0c;却忽略了岁月的脚步&#xff0c;当身边的一道道风景变成了回忆&#xff0c;才忽然发现&#xff0c;风景依然在&#xff0c;而人已非少年。&#xff01;&#xff01;&#xff01; 【22.求和案例--纯Vue版本】 太简单了&#xff0c;直接上代码案…

【macOS 系列】下载brew或其他依赖包提示连接超时的问题解决

在下载brew或其他依赖包提示连接超时 错误信息&#xff1a; curl: (7) Failed to connect to [raw.githubusercontent.com](http://raw.githubusercontent.com/) port 443 after 34 ms: Connection refused最简单的方式&#xff0c;就是修改DNS&#xff1a;为114.114.114.114…

QSciintilla_gpl-2.10.8版本在QT6中编译问题解决方案汇总

1. QWheelEvent &#xff08;1&#xff09;event->delta()需修改为event->angleDelta().y()&#xff1b; 2. sprintf": 不是 "QString" 的成员 sprintf->asprintf 3. 无法打开QTextCodec .pro文件中添加 greaterThan(QT_MAJOR_VERSION, 5) { …

精进ARM计算架构,催生人工智能产业的巨大跨越

在优化ARM计算架构以支持人工智能应用方面&#xff0c;以下是一些常见的方法和技术&#xff1a; 算法和模型设计优化&#xff1a;选择合适的算法和模型结构对于在ARM架构上高效执行人工智能任务至关重要。设计轻量级的模型、减少冗余操作和参数量&#xff0c;使用适合ARM架构的…

基于改进莱维飞行和混沌映射的粒子群算法(10种混沌映射随意切换),附matlab代码

“ 本篇文章对粒子群优化算法进行改进&#xff0c;首先通过引入混沌映射机制&#xff0c;对其群体进行初始化&#xff0c;增加粒子群个体的多样性&#xff1b;然后在粒子群个体的位置更新公式上引入改进的莱维飞行机制&#xff0c;提高搜索精度&#xff0c;帮助粒子群个体跳出局…

MySQL数据库引擎及账号管理

目录 前言 二、MySQL数据库引擎 1.是什么 2.MySQL的核心 3.MySQL的存储引擎 a.InnoDB(MySQL默认引擎) b.ACID事务 c.四种隔离级别 d.MyISAM e.MEMORY&#xff08;Heap&#xff09; 4.存储引擎查看 三、命令行操作数据库 四、账号管理 前言 MySQL安装请看MySQL的安装…

Matlab学习-轨迹热力图绘制

Matlab学习-轨迹热力图绘制 参考链接&#xff1a; MathWork-scatter函数使用 问题需求&#xff1a; 需要将轨迹上的点另一维信息同时显示在图上&#xff0c;比如横纵向误差等&#xff0c;这个时候画轨迹与误差的热力图就能很好同时反应位置和定位误差之间的关系&#xff1b;…