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)
}
相关推荐
梦曦i11 小时前
unix-router v0.1.0 首发:uni-app x 的 vue-router 风格路由库
前端·uni-app
鲲穹AI种草1 天前
PDF 文档多格式转换处理,多款 PDF 处理工具能力客观记录
pdf·文档格式转换
bug总结1 天前
uniapp 微信小程序分包规范
微信小程序·小程序·uni-app
天府云创1 天前
uni-app X 蒸汽模式发布!性能比肩原生~
前端框架·uni-app·移动开发·原生应用·蒸汽模式·app研发·多端适配
Felicia-侧听1 天前
PDF怎么转换成OFD?在线PDF转OFD方法
pdf·pdf转换·ofd·电子发票·文件格式转换·pdf转ofd·ofd格式
堕落年代1 天前
uni-app x 蒸汽模式:实时流式语音识别(ASR)三大疑难杂症全记录
人工智能·uni-app·语音识别
RisunJan2 天前
uni-app 高频面试题与解答
uni-app
梦曦i2 天前
@meng-xi/create-uni-app vs unibest:轻量脚手架与重型框架的定位之争
前端·uni-app
开开心心_Every2 天前
实现鼠标键盘动作录制与重复播放的工具
微信·jupyter·pycharm·pdf·计算机外设·word·excel
2601_962299492 天前
使用 Python 将 CSV 转为 PDF(含表格样式美化)
python·pdf·csv·spire.xls·表格样式