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)
}
相关推荐
百思可瑞教育1 小时前
uni-app 根据用户不同身份显示不同的tabBar
vue.js·uni-app·北京百思可瑞教育·北京百思教育
小*-^-*九7 小时前
php 使用html 生成pdf word wkhtmltopdf 系列2
pdf·html·php
Q_Q19632884758 小时前
python+springboot+uniapp微信小程序题库系统 在线答题 题目分类 错题本管理 学习记录查询系统
spring boot·python·django·uni-app·node.js·php
百思可瑞教育9 小时前
使用UniApp实现一个AI对话页面
javascript·vue.js·人工智能·uni-app·xcode·北京百思可瑞教育·百思可瑞教育
不想吃饭e10 小时前
在uniapp/vue项目中全局挂载component
前端·vue.js·uni-app
00后程序员张11 小时前
iOS App 混淆与资源保护:iOS配置文件加密、ipa文件安全、代码与多媒体资源防护全流程指南
android·安全·ios·小程序·uni-app·cocoa·iphone
千册11 小时前
pyside6 的pdf显示测试 -- 01
开发语言·python·pdf
qq_1728055913 小时前
Go 语言 PDF 生成库综合比较与实践指南
开发语言·golang·pdf
不知名的前端专家15 小时前
uniapp原生插件 TCP Socket 使用文档
网络·tcp/ip·uni-app·netty
E_ICEBLUE16 小时前
如何使用 OCR 提取扫描件 PDF 的文本(Python 实现)
java·数据库·pdf