当前位置: 首页 > news >正文

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)
}

相关文章:

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

原先下载方式,PC管理端和浏览器打开文件能下载,xls没出现乱码,pdf能正常显示,H5下载xls乱码锟斤拷,PDF显示空白内容 怀疑是前端问题,也尝试过修改后端代码 后端设置编码格式 response.setCharacterEncoding(characte…...

Vue25-内置指令02:v-text指令

一、v-html对比v-text v-html支持结构的解析,v-text不支持结构的解析。 二、v-html的安全性问题 2-1、cookie的原理(node.js) 7天免登录,cookie实现。 cookie的本质就是类似于json的字符串,格式是:key-va…...

stable diffusion中的negative prompt是如何工作的

https://stable-diffusion-art.com/how-negative-prompt-work/https://stable-diffusion-art.com/how-negative-prompt-work/https://zhuanlan.zhihu.com/p/644879268...

STM32项目分享:智能小区充电桩系统

目录 一、前言 二、项目简介 1.功能详解 2.主要器件 三、原理图设计 四、PCB硬件设计 1.PCB图 2.PCB板打样焊接图 五、程序设计 六、实验效果 七、资料内容 项目分享 一、前言 项目成品图片: 哔哩哔哩视频链接: https://www.bilibili.c…...

PDU模块中浪涌保护模块与空开模块的应用

由于PDU具体应用的特殊性,其在规划设计时具有应用场景的针对性,同时PDU的高度定制化的特点,是其他电气联接与保护产品所不具备的。 PDU基础的输出输入功能外,其电路的控制与电压保护器同时也极为重要。空气开关和浪涌保护器相关功…...

19、Go Gin框架集成Swagger

介绍: Swagger 支持在 Gin 路由中使用一系列注释来描述 API 的各个方面。以下是一些常用的 Swagger 注释属性,这些属性可以在 Gin 路由的注释中使用: Summary: 路由的简短摘要。Description: 路由的详细描述。Tags: 用于对路由进行分类的标…...

自动同步库数据——kettle开发36

kettle中的那些人工智能。 一、kettle的AI能力目录 跨库同步 2.自动开发 3.自动优化 二、AI实例 1、跨库同步 sqlsever表同步至oracle数据库 1.1源库sqlserver 1.2目标库oracle 1.3可视化跨库同步 使用多表复制向导 选择跨库的表,下一步下一步,即可…...

MSOCache在电脑中可以删除吗?

MSOCache文件夹在电脑中是可以删除的。但删除前需要了解以下几点: MSOCache文件夹的作用: MSOCache文件夹是Microsoft Office的本地安装源,用于存储Office安装和更新过程中所需的临时文件,如安装程序所需的组件、配置设置以及更新…...

数据网格和视图入门

WinForms数据网格(GridControl类)是一个数据感知控件,可以以各种格式(视图)显示数据。本主题包含以下部分,这些部分将指导您如何使用网格控件及其视图和列(字段)。 Grid Control’s…...

雨的轮回与生命的律动

雨的轮回与生命的律动 我们生活在一个充满变数的世界里,许多事情无法预测,如同这不知何时会停歇的雨。然而,尽管我们无法预知雨停的确切时刻,但我们深知,这场雨终将会过去,阳光终将再次洒满大地。这种对未…...

CANopen for Python 使用教程(二)

系列文章目录 前言 CANopen 标准的 Python 实现。该项目的目的是在一个简单的 Pythonic 接口中支持 CiA 301 标准中最常见的部分。它主要针对测试和自动化任务,而不是符合标准的主实施。 该库支持 Python 3.6 及以上版本。 一、特点 该库主要用作主库。 NMT 主站…...

前方碰撞缓解系统技术规范(简化版)

前方碰撞缓解系统技术规范(简化版) 1 系统概述2 工作时序3 预警目标4 功能条件5 HMI开关6 显示需求7 相关子功能8 TTC标定参考9 指标需求1 系统概述 前方碰撞缓解系统包含LW潜在危险报警、FCW前方碰撞预警和AEB自动紧急制动三个部分。 LW潜在危险报警:根据本车与前车保持的…...

数据赋能(117)——体系:数据收集——实施过程、应用特点

实施过程 数据收集过程是一个系统化、有序的步骤集合,旨在确保能够准确、高效地获取所需数据。以下是数据收集过程的基本步骤: 明确数据需求:这是数据收集的第一步,需要明确需要收集哪些类型的数据,这些数据将如何支…...

【吃包子game】

如果您想要编写一个简单的“吃包子”游戏代码,可以使用Python语言来实现。下面是一个简单的例子,该游戏会随机生成一定数量的包子,玩家每次可以吃掉一个包子,直到包子被吃光为止。 import random def eat_dumplings():# 随机生成…...

图片转Base64

在Python中, 可以使用内置的base64模块以及图像处理库(如PIL, 也称为Pillow)来将图片转换为Base64编码的字符串. 以下是一个简单的示例, 说明如何实现这一过程:首先, 需要安装Pillow库(如果尚未安装), 可以使用pip来安装: pip install pillow然后, 可以使用以下Python代码将图片…...

STM32项目分享:智能家居语音系统

目录 一、前言 二、项目简介 1.功能详解 2.主要器件 三、原理图设计 四、PCB硬件设计 1.PCB图 2.PCB打板焊接图: 五、程序设计 六、实验效果 七、包含内容 项目分享 一、前言 项目成品图片: 哔哩哔哩视频链接: https://www.bilibili.com…...

iOS 18 为 iPhone 15 机型引入了更多充电限制选项

iOS 18 为 iPhone 15 机型引入了更多充电限制选项 所有四款iPhone 15型号都具备一项设置,可以限制设备充电至80%以内,这样能够缩短电池完全充电所需的时间,并有可能延长iPhone电池的使用寿命。随着iOS 18的推出,Apple进一步加入了…...

Linux文本三剑客 awk 和 grep

awk 前言 AWK是一种优良的文本处理工具。它不仅是 Linux中也是任何环境中现有的功能最强大的数据处理引擎之一。 Linux中最常用的文本处理工具有grep,sed,awk。行内将之称为文本三剑客,就功能量和效率来看,awk是当之无愧的文本三…...

Python NumPy 库详解

大家好,在当今数据驱动的世界中,处理大规模数据、进行复杂数值计算是科学研究、工程设计以及数据分析的关键任务之一。在Python生态系统中,NumPy(Numerical Python)库是一款备受推崇的工具,它为我们提供了高…...

React state 执行时机

设置 state 只会为下一次渲染变更 state 的值 一个 state 变量的值永远不会在一次渲染的内部发生变化 React 会使 state 的值始终"固定"在一次渲染的各个事件处理函数内部 React 会等到事件处理函数中的所有代码都运行完毕再处理 state 更新 在一个函数中&#xff0…...

【根据当天日期输出明天的日期(需对闰年做判定)。】2022-5-15

缘由根据当天日期输出明天的日期(需对闰年做判定)。日期类型结构体如下: struct data{ int year; int month; int day;};-编程语言-CSDN问答 struct mdata{ int year; int month; int day; }mdata; int 天数(int year, int month) {switch (month){case 1: case 3:…...

React Native 导航系统实战(React Navigation)

导航系统实战(React Navigation) React Navigation 是 React Native 应用中最常用的导航库之一,它提供了多种导航模式,如堆栈导航(Stack Navigator)、标签导航(Tab Navigator)和抽屉…...

三维GIS开发cesium智慧地铁教程(5)Cesium相机控制

一、环境搭建 <script src"../cesium1.99/Build/Cesium/Cesium.js"></script> <link rel"stylesheet" href"../cesium1.99/Build/Cesium/Widgets/widgets.css"> 关键配置点&#xff1a; 路径验证&#xff1a;确保相对路径.…...

阿里云ACP云计算备考笔记 (5)——弹性伸缩

目录 第一章 概述 第二章 弹性伸缩简介 1、弹性伸缩 2、垂直伸缩 3、优势 4、应用场景 ① 无规律的业务量波动 ② 有规律的业务量波动 ③ 无明显业务量波动 ④ 混合型业务 ⑤ 消息通知 ⑥ 生命周期挂钩 ⑦ 自定义方式 ⑧ 滚的升级 5、使用限制 第三章 主要定义 …...

基于服务器使用 apt 安装、配置 Nginx

&#x1f9fe; 一、查看可安装的 Nginx 版本 首先&#xff0c;你可以运行以下命令查看可用版本&#xff1a; apt-cache madison nginx-core输出示例&#xff1a; nginx-core | 1.18.0-6ubuntu14.6 | http://archive.ubuntu.com/ubuntu focal-updates/main amd64 Packages ng…...

AtCoder 第409​场初级竞赛 A~E题解

A Conflict 【题目链接】 原题链接&#xff1a;A - Conflict 【考点】 枚举 【题目大意】 找到是否有两人都想要的物品。 【解析】 遍历两端字符串&#xff0c;只有在同时为 o 时输出 Yes 并结束程序&#xff0c;否则输出 No。 【难度】 GESP三级 【代码参考】 #i…...

Python爬虫实战:研究feedparser库相关技术

1. 引言 1.1 研究背景与意义 在当今信息爆炸的时代,互联网上存在着海量的信息资源。RSS(Really Simple Syndication)作为一种标准化的信息聚合技术,被广泛用于网站内容的发布和订阅。通过 RSS,用户可以方便地获取网站更新的内容,而无需频繁访问各个网站。 然而,互联网…...

STM32标准库-DMA直接存储器存取

文章目录 一、DMA1.1简介1.2存储器映像1.3DMA框图1.4DMA基本结构1.5DMA请求1.6数据宽度与对齐1.7数据转运DMA1.8ADC扫描模式DMA 二、数据转运DMA2.1接线图2.2代码2.3相关API 一、DMA 1.1简介 DMA&#xff08;Direct Memory Access&#xff09;直接存储器存取 DMA可以提供外设…...

el-switch文字内置

el-switch文字内置 效果 vue <div style"color:#ffffff;font-size:14px;float:left;margin-bottom:5px;margin-right:5px;">自动加载</div> <el-switch v-model"value" active-color"#3E99FB" inactive-color"#DCDFE6"…...

【Go】3、Go语言进阶与依赖管理

前言 本系列文章参考自稀土掘金上的 【字节内部课】公开课&#xff0c;做自我学习总结整理。 Go语言并发编程 Go语言原生支持并发编程&#xff0c;它的核心机制是 Goroutine 协程、Channel 通道&#xff0c;并基于CSP&#xff08;Communicating Sequential Processes&#xff0…...