• 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 时指定文件类型和编码格式,还是不能解决。
    原先代码
    // 通用下载方法
    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)
    }
    
  • 相关阅读:
    label问题排查:打不开标注好的图像
    威高血液净化冲刺香港:年营收29亿 净利降12.7%
    【机器学习】拉格朗日对偶性
    RK3288 android7.1 修改双屏异触usb tp触摸方向
    vue学习之vue cli创建项目
    CS224W 6 Graph Neural Networks
    从双非硕士到大厂工作,优秀
    学习笔记(14)Promise
    满足开闭原则的JDBCUtils~
    NPDP产品经理知识(产品创新流程)
  • 原文地址:https://blog.csdn.net/qq_43751489/article/details/139620418