uni-app文件下载 h5 xls 乱码 锟斤拷 Blob pdf打不开

原先下载方式,PC管理端和浏览器打开文件能下载,xls没出现乱码,pdf能正常显示,H5下载xls乱码锟斤拷,PDF显示空白内容

怀疑是前端问题,也尝试过修改后端代码
后端设置编码格式

  1. response.setCharacterEncoding(characterEncoding),前端用Blob接受,xls文件会打不开。
  2. 怀疑文件读编码格式有问题,锟斤拷 出现原因是GBK->UTF-8->GBK导致的,设置后端读取文件的编码格式 ,也没有效果。

前端设置编码格式,查看h5下载代码,怀疑是blob转换导致的

  1. 在new Blob 时指定文件类型和编码格式,还是不能解决。
原先代码
// 通用下载方法
export function download(url, params, method) {return tools.http(url, params, {method: !method ? 'GET' : method,responseType: 'blob'}).then(async (res) => {const isLogin = await blobValidate(res.data);if (isLogin) {let fileName = '';let fileType = '';if (res.header['download-filename']) {fileName = res.header['download-filename']fileType = res.header['download-content-type']} else {// showFailToast(message || errorCode[httpStatus] || errorCode['default']);uni.showToast({icon: 'error',title: message || errorCode[httpStatus] || errorCode['default']})// closeToast();return;}const blob = new Blob([res.data], {type: fileType});if (typeof window.navigator.msSaveBlob !== 'undefined') {// 兼容IE,window.navigator.msSaveBlob:以本地方式保存文件window.navigator.msSaveBlob(blob, decodeURI(fileName));} else {let url = window.URL.createObjectURL(blob);let link = document.createElement('a');link.style.display = 'none';link.href = url;link.setAttribute('download', decodeURI(fileName));document.body.appendChild(link);link.click();document.body.removeChild(link);// 释放blob URL地址window.URL.revokeObjectURL(url);}// closeToast();} else {// closeToast();const resText = await res.data.text();const rspObj = JSON.parse(resText);const errMsg = rspObj.message || errorCode[rspObj.httpStatus] || errorCode['default'];// showFailToast(errMsg);uni.showToast({icon: 'error',title: errMsg})}}).catch((r) => {// closeToast();console.log(r)uni.showToast({icon: 'error',title: '文件出现错误,请联系管理员!'})})
}
解决方案

看到若依框架有个工具类,在uni-app安装,完美解决问题,还是要多接触代码,站在大佬的肩膀上,看看人家处理blob源码

  // prepend BOM for UTF-8 XML and text/* types (including HTML)// note: your browser will automatically convert UTF-16 U+FEFF to EF BB BFif (opts.autoBom && /^\s*(?:text\/\S*|application\/xml|\S*\/\S*\+xml)\s*;.*charset\s*=\s*utf-8/i.test(blob.type)) {return new Blob([String.fromCharCode(0xFEFF), blob], { type: blob.type })}return blob

FileSaver

npm install file-saver --save
import { saveAs } from 'file-saver';
export function downloadBySaveAs(url, fileName) {saveAs(url,fileName)
}

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

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

相关文章

人类如何挣脱被人工智能替代的命运?

人工智能技术的迭代升级,使得“换脸”“拟声”成为可能,我如何证明不是“我”?面对人工智能超高的生产效率,我如何与人工智能“抢工作”?在人工智能时代,如何回应这类疑问?挣脱被替代的命运&…

Java爬虫——正则表达式应用

Pattern Matcher均属于regex下 步骤:pattern获取正则,matcher获取文本对象,find截取字符串(返回true、false),group获得字符 例题:爬取指定文字 分析: 二次调用时: 循环…

2024年6月13日 英语角策划

🌟 English Corner 🌟 Theme for Today: What Do You Hope to Gain? How Was Your Day? 📅 Date: June 13, 2024 📍 Location: Floor 11, Room F1111, Building F ⏰ Time: 17:00 - 17:30 🎉 Welcome to Our Engli…

搭建一个简单的深度神经网络

目录 一、引入所需要的库 二、制作数据集 三、搭建神经网络 四、训练网络 五、测试网络 本博客实验环境为jupyter 一、引入所需要的库 torch库是核心,其中torch.nn 提供了搭建网络所需的所有组件,nn即神经网络。matplotlib类似与matlab&#xff0…

Day53 触发器,存储过程,预定义函数,自定义函数

Day53 1.触发器 由某个事件去触发某个操作,这些事件有:insert、update、delete语句; 创建触发器: [ delimiter XX ] create trigger 触发器名 [before | after] 触发事件 on 表名 for each row 执行语句begin多条执行语句end 加上…

透平油氧化安定性检测 发动机油运动粘度40℃检测

透平油氧化安定性检测 透平油,也称为涡轮机油或汽轮机油,是专门用于汽轮机的润滑油。它具有良好的抗氧化安定性和抗乳化性能,主要用于发电厂蒸气轮机、水电站水轮发电机以及其他需要深度精细润滑的场合。透平油的氧化安定性是衡量其在高温条件…

服务器防漏扫,主机加固方案来解决

什么是漏扫? 漏扫是漏洞扫描的简称。漏洞扫描是一种安全测试方法,用于发现计算机系统、网络或应用程序中的潜在漏洞和安全弱点。通过使用自动化工具或软件,漏洞扫描可以检测系统中存在的已知漏洞,并提供相关的报告和建议&#xf…

编程课面向和右转的区别:深入解析与实际应用

编程课面向和右转的区别:深入解析与实际应用 在编程课程中,尤其是在学习图形化编程或更高级的文本编程时,我们常常会遇到“面向”和“右转”这两个指令。虽然它们看似简单,但在实际应用中却有着显著的区别和重要性。本文将详细探…

Python教程:一文了解从Bytes到Bits的数据转换

目录 1. 什么是Bit? 1.1 Bit的定义 1.2 Bit的用途 1.3 示例 2. 什么是Byte? 2.1 Byte的定义 2.2 Byte的用途 2.3 示例 3. Byte与Bit的关系 3.1 转换关系 3.2 示例 4. 实际应用中的Byte和Bit 4.1 数据传输 4.2 数据存储 4. Bytes与Bits的转…

YOLOv10原理与实战训练自己的数据集

课程链接:YOLOv10原理与实战训练自己的数据集_在线视频教程-CSDN程序员研修院 YOLOv10是最近提出的YOLO的改进版本。在后处理方面,提出了一致性双重分配策略用于无NMS训练,从而实现了高效的端到端检测。在模型架构方面,引入了全面…

Unity中的AssetBundleManifest

在Unity中,AssetBundleManifest是一个重要的类,它包含了关于AssetBundles的元数据,如依赖关系、哈希值等。以下是对AssetBundleManifest类中常用属性和方法的清晰归纳: 常用属性 无直接公开属性:AssetBundleManifest…

等保测评在防范数据泄露中的关键作用

#等保测评##黑龙江等保测评##哈尔滨等保测评# 在信息时代,数据已成为企业最为宝贵的资产之一,而数据泄露事件频发,不仅严重威胁企业的经济利益,更关乎国家安全和社会稳定。信息安全等级保护测评(简称“等保测评”&…

OpenCV中的圆形标靶检测——findCirclesGrid()(一)

如前所述,OpenCV中可以使用findCirclesGrid()实现圆形标靶的检测,该函数的计算流程分为1)斑点形状的检测,和2)基于规则的斑点形状的过滤与定位。第一步将类似圆斑形状的区域检测出来,但可能存在一些误检测的噪声,第二步则利用圆斑的分布规则(M*N排列)进行进一步的过滤…

ubuntu如何查看ip地址

ubuntu如何查看ip地址 方法一:使用ifconfig方法二:使用ip命令 方法一:使用ifconfig 命令行输入ifconfig: 这里inet后跟的内容就是IP地址。 方法二:使用ip命令 命令行输入:ipa ddr: 这里ine…

【Python入门与进阶】Python的运算符

Python中的运算符可以分为几类,每种运算符有特定的用法。 以下是一些主要的Python运算符及其用法: 1. 算术运算符 :加法 a 5 b 3 print(a b) # 输出 8-:减法 print(a - b) # 输出 2*:乘法 print(a * b) # 输出 …

轮到国产游戏统治Steam榜单

6月10日晚8点,《黑神话:悟空》实体版正式开启全款预售,预售开启不到5分钟,所有产品即宣告售罄。 Steam上,《黑神话:悟空》持续占据着热销榜榜首的位置。 但在《黑神话:悟空》傲人的光环下,还有一款国产游戏取得出色的成绩。 6月10日&#…

RK3568笔记三十二:PaddleSeg训练部署

一、环境 1、Autodl配置 PyTorch 1.7.0Python 3.8(ubuntu18.04)Cuda 11.02、所需环境需求 - OS: 64-bit - Python 3(3.6/3.7/3.8/3.9/3.10),64-bit version - pip/pip3(9.0.1),64-bit version - CUDA > 10.2 - cuDNN > 7.6 - PaddlePaddle (the…

“树莓派” 成为上市公司

“树莓派” 成为上市公司 树莓派公司昨日已在伦敦证券交易所首次亮相(Raspberry Pi Holdings plc)。早盘交易中,该公司股价大涨,这为伦敦首次公开发行(IPO)市场带去了一些动力。 Stable Diffusion 3 开源倒…

SaaS产品运营 | 千万不能踏入的PLG模式的六大误区

随着科技的迅速发展和市场竞争的日益激烈,越来越多的公司开始尝试采用PLG(Product Led Growth,即产品驱动增长)模式来推动其业务的发展。然而,尽管PLG模式在促进增长方面具有显著优势,但在实践中也容易出现…

先导小型五轴联动数控加工中心

先导小型五轴联动加工中心可以作为学校或培训机构的教学工具,帮助学生了解数控加工的基本原理和操作方法。它特别适用于机械、自动化、工业设计等相关专业的学生进行实践操作和课程项目。 小型五轴联动加工中心是一种能够同时控制五个自由度进行联动的加工设备。这五…