uni-app文件下载 h5 xls 乱码 锟斤拷 Blob pdf打不开
原先下载方式,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) }
免责声明:我们致力于保护作者版权,注重分享,被刊用文章因无法核实真实出处,未能及时与作者取得联系,或有版权异议的,请联系管理员,我们会立即处理! 部分文章是来自自研大数据AI进行生成,内容摘自(百度百科,百度知道,头条百科,中国民法典,刑法,牛津词典,新华词典,汉语词典,国家院校,科普平台)等数据,内容仅供学习参考,不准确地方联系删除处理! 图片声明:本站部分配图来自人工智能系统AI生成,觅知网授权图片,PxHere摄影无版权图库和百度,360,搜狗等多加搜索引擎自动关键词搜索配图,如有侵权的图片,请第一时间联系我们,邮箱:ciyunidc@ciyunshuju.com。本站只作为美观性配图使用,无任何非法侵犯第三方意图,一切解释权归图片著作权方,本站不承担任何责任。如有恶意碰瓷者,必当奉陪到底严惩不贷!