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)
}
相关推荐
SEO-狼术3 小时前
Improve Navigation with In-Cell Hyperlinks
python·pdf
态态态3 小时前
平板PDF充足笔记空间的最优解
笔记·pdf
烈焰飞鸟7 小时前
iconfont 在 uni-app 项目中的完整使用指南
vue.js·uni-app·iconfont
开开心心就好8 小时前
电子教材下载工具,支持多链接批量下载
windows·随机森林·计算机视觉·pdf·计算机外设·逻辑回归·excel
TON_G-T9 小时前
uniapp-解放主包,组件下沉分包插件
webpack·uni-app
笨笨狗吞噬者9 小时前
【uniapp】小程序支持分包存放微信自定义组件 wxcomponents
前端·微信小程序·uni-app
rosmis9 小时前
自动化文献检索与下载工作流 (Phase 3 逻辑树)
python·pdf·自动化
南风微微吹9 小时前
考研数学一、二、三历年真题及答案解析PDF电子版(1987-2026年)
考研·pdf
南风微微吹10 小时前
2009-2025年英语专业四级历年真题及答案解析电子版PDF(专四)
pdf·英语专业四级
蓝色心灵-海10 小时前
小律书 技术架构详解:前后端分离的自律管理系统设计
java·http·小程序·架构·uni-app