原先下载方式,PC管理端和浏览器打开文件能下载,xls没出现乱码,pdf能正常显示,H5下载xls乱码锟斤拷,PDF显示空白内容
怀疑是前端问题,也尝试过修改后端代码
后端设置编码格式
- response.setCharacterEncoding(characterEncoding),前端用Blob接受,xls文件会打不开。
- 怀疑文件读编码格式有问题,锟斤拷 出现原因是GBK->UTF-8->GBK导致的,设置后端读取文件的编码格式 ,也没有效果。
前端设置编码格式,查看h5下载代码,怀疑是blob转换导致的
- 在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 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
npm install file-saver --save
import { saveAs } from 'file-saver';
export function downloadBySaveAs(url, fileName) {
saveAs(url,fileName)
}