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 时指定文件类型和编码格式,还是不能解决。
原先代码
js 复制代码
// 通用下载方法
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源码

js 复制代码
  // prepend BOM for UTF-8 XML and text/* types (including HTML)
  // note: your browser will automatically convert UTF-16 U+FEFF to EF BB BF
  if (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

cmd 复制代码
npm install file-saver --save
js 复制代码
import { saveAs } from 'file-saver';
js 复制代码
export function downloadBySaveAs(url, fileName) {
	saveAs(url,fileName)
}
相关推荐
游戏开发爱好者82 小时前
日常开发与测试的 App 测试方法、查看设备状态、实时日志、应用数据
android·ios·小程序·https·uni-app·iphone·webview
2501_915106324 小时前
app 上架过程,安装包准备、证书与描述文件管理、安装测试、上传
android·ios·小程序·https·uni-app·iphone·webview
2501_915106324 小时前
使用 Sniffmaster TCP 抓包和 Wireshark 网络分析
网络协议·tcp/ip·ios·小程序·uni-app·wireshark·iphone
宠友信息6 小时前
2025社交+IM及时通讯社区APP仿小红书小程序
java·spring boot·小程序·uni-app·web app
“负拾捌”6 小时前
python + uniapp 结合腾讯云实现实时语音识别功能(WebSocket)
python·websocket·微信小程序·uni-app·大模型·腾讯云·语音识别
Java面试题总结20 小时前
基于 Java 的 PDF 文本水印实现方案(iText7 示例)
java·python·pdf
傻啦嘿哟21 小时前
Python操作PDF页面详解:删除指定页的完整方案
开发语言·python·pdf
局外人LZ1 天前
Uniapp脚手架项目搭建,uniapp+vue3+uView pro+vite+pinia+sass
前端·uni-app·sass
2501_915918411 天前
在 iOS 环境下查看 App 详细信息与文件目录
android·ios·小程序·https·uni-app·iphone·webview
前端呆头鹅1 天前
Websocket使用方案详解(uniapp版)
websocket·网络协议·uni-app