uni-app文件下载 h5 xls 乱码 锟斤拷 Blob pdf打不开

本文主要是介绍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)
}

这篇关于uni-app文件下载 h5 xls 乱码 锟斤拷 Blob pdf打不开的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---