当前位置: 首页 > news >正文

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 BFif (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)
}
http://www.lryc.cn/news/370876.html

相关文章:

  • Vue25-内置指令02:v-text指令
  • stable diffusion中的negative prompt是如何工作的
  • STM32项目分享:智能小区充电桩系统
  • PDU模块中浪涌保护模块与空开模块的应用
  • 19、Go Gin框架集成Swagger
  • 自动同步库数据——kettle开发36
  • MSOCache在电脑中可以删除吗?
  • 数据网格和视图入门
  • 雨的轮回与生命的律动
  • CANopen for Python 使用教程(二)
  • 前方碰撞缓解系统技术规范(简化版)
  • 数据赋能(117)——体系:数据收集——实施过程、应用特点
  • 【吃包子game】
  • 图片转Base64
  • STM32项目分享:智能家居语音系统
  • iOS 18 为 iPhone 15 机型引入了更多充电限制选项
  • Linux文本三剑客 awk 和 grep
  • Python NumPy 库详解
  • React state 执行时机
  • Spring基于注解开发
  • 深度探索:智能家居背后的科技力量与伦理思考
  • 鸿蒙开发:通过startAbilityByType拉起垂类应用
  • docker 更换镜像源
  • Springboot(若依)国际化配置接口访问后返回????????
  • java1
  • pytest中一个场景测试的demo
  • windows下安装IntelliJIDEA
  • string经典题目(C++)
  • 三篇卫星切换的论文
  • VUE之重定向redirect