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)
}
相关推荐
iOS阿玮1 天前
碰到一个不听劝的老板,喜提4.3a!
uni-app·app·apple
yesyesido1 天前
PDF全能管家:3合1智能处理,一键解锁高效文档管理新体验
科技·考研·安全·pdf·生活·交互·改行学it
聊询QQ:276998851 天前
基于Matlab的转速开环恒压频比异步电动机调速系统设计报告与仿真程序
uni-app
南风微微吹1 天前
2015-2025年英语四级历年真题及答案解析PDF电子版(可下载)
pdf·英语四级
拓端研究室1 天前
专题:2026年中国消费零售行业新图景报告:消费者行为、品牌增长与AI应用|附540+份报告PDF、数据、可视化模板汇总下载
人工智能·pdf·零售
YongCheng_Liang1 天前
Python实现PDF 转 JPG 批量转换工具
运维·python·pdf
weixin_462446231 天前
【原创实现】Python 实现 PDF 批量压缩工具(支持逐个确认 / 批量处理 / 多级压缩)
开发语言·python·pdf
泰勒朗斯1 天前
解除/unlock pdf加密加锁
pdf
Ustinian_3101 天前
【python】图片转PDF工具【附完整源码】
开发语言·python·pdf
2501_930707781 天前
如何使用C#更改 PDF 文档的安全权限
安全·pdf