vue 实现 word、ppt、excel、图片、PDF、视频、音频等格式的文件下载，以及uniapp中文件包（文件流）的下载处理

方法一：a标签

1、后台返回的url地址

// 下载
const downLoad = (url: string, name: string,type:string) => {
    var xhr = new XMLHttpRequest();
    xhr.open('GET', url, true);
    xhr.responseType = 'arraybuffer'; // 返回类型blob
    xhr.onload = function () {
        if (xhr.readyState === 4 && xhr.status === 200) {
            let blob = this.response;
            // 转换一个blob链接
            // 注: URL.createObjectURL() 静态方法会创建一个 DOMString(DOMString 是一个UTF-16字符串)，
            // 其中包含一个表示参数中给出的对象的URL。这个URL的生命周期和创建它的窗口中的document绑定
            let downLoadUrl =''
            if (type==='视频'){
                downLoadUrl = window.URL.createObjectURL(new Blob([blob], {
                    type: 'video/mp4'
                }));
            } else if (type === '图片' || type === '文件'){
                downLoadUrl = url
            }
            // 视频的type是video/mp4，图片是image/jpeg
            // 01.创建a标签
            let a = document.createElement('a');
            // 02.给a标签的属性download设定名称
            a.download = name;
            // 03.设置下载的文件名
            a.href = downLoadUrl;
            // 04.对a标签做一个隐藏处理
            a.style.display = 'none';
            // 05.向文档中添加a标签
            document.body.appendChild(a);
            // 06.启动点击事件
            a.click();
            // 07.下载完毕删除此标签
            a.remove();
        };
    };
    xhr.send()
}

2、后台返回文件流，指定了文件类型

export function getExportJobQuest(data: any) {
  return request({
    url: '',
    method: 'post',
    responseType: 'blob',
    data
  })
}

// 点击导出按钮
const downQuestObject = async () => {
  const res = await getExportJobQuest(selectQuestGroupIds.value)
  downloadFile(res,currJob.value.name)
}

const downloadFile = (filestream:any,fileName:string) => {
  // filestream: 返回的文件流  fileName: 设置下载的文件名称
	const blob = new Blob([filestream],{type:'application/vnd.openxmlformats-officedocument.wordprocessingml.document'||'application/msword'});
	const a = document.createElement('a');
	const href = window.URL.createObjectURL(blob); // 创建下载连接
	a.href = href;
	a.download = decodeURI(fileName);
	document.body.appendChild(a);
	a.click();
	document.body.removeChild(a); // 下载完移除元素
	window.URL.revokeObjectURL(href); // 释放掉blob对象
}

3、后台返回文件流，没返回文件类型 application/octet-stream

// 文件下载
export const downFileApi = (id:number) => {
  let token = storage.getItem(constant.CONFIG_TOKEN)
  return axios.get(
    import.meta.env.VITE_BASE_URL_API + `/api/user/userresourcemanagement/downfile?resourceId=${id}`,
    {
      headers: {
        Authorization: `Bearer ${token}`,
      },
      responseType: "arraybuffer"
    }
  );
}

// 下载按钮
const downDatas = async (item: any) => {
  const res = await downFileApi(item.id)
  downloadFile(res, () => {})
}

export function downloadFile(res: any, fun: Function) {
  let filename = res.headers["content-disposition"]
    .split(";")[2]
		.split("filename*=UTF-8''")[1];
	console.log(66,filename)
  //创建一个隐藏的a链接
  const link = document.createElement("a");
  let blob = new Blob([res.data], { type: res.headers["content-type"] }); //文件流处理
  link.style.display = "none"; //去除a标签的样式
  //设置连接
  link.href = window.URL.createObjectURL(blob);
  link.download = window.decodeURI(filename);
  document.body.appendChild(link);
  //模拟点击事件
  link.click();
  //移除创建的a标签
  document.body.removeChild(link);
  window.URL.revokeObjectURL(link.href);
  fun(false);
}

方法二：阿里云——获取文件的下载URL 

地址：预览或下载文件 - 对象存储 OSS - 阿里云

1、安装 ali-oss

cnpm install --save ali-oss

2、页面调用，client 中相关的属性需要自己去配置

const downLoad =async (item:any) => {
    let res:TResponse<TDownType>= await getAliossSetting()
    let {Code,Data}=res
    if(Code===200){
        const OSS = require('ali-oss');
        person.client = new OSS({
            // yourRegion填写Bucket所在地域。以华东1（杭州）为例，Region填写为oss-cn-hangzhou。
            region: Data.RegionId,
            // 从STS服务获取的临时访问密钥（AccessKey ID和AccessKey Secret）。
            accessKeyId: Data.AccessKeyID,
            accessKeySecret: Data.AccessKeySecret,
            // 从STS服务获取的安全令牌（SecurityToken）。
            // stsToken: 'yoursecurityToken',
            // 填写Bucket名称。
            bucket: Data.Bucket,
        });
    }
    // 配置响应头实现通过URL访问时自动下载文件，并设置下载后的文件名。
    var ext = item.Url.split('.')[item.Url.split('.').length - 1]
    const filename = item.Name+'.'+ext
    const response = {
        'content-disposition': `attachment; filename=${encodeURIComponent(filename)}`
    }
    // item.OldUrl: 'App.Live/教学部/uploads/图片/2022-08-23/e014dca2f0ff4f1e90ac931f32018140.png'
    // 填写Object完整路径。Object完整路径中不能包含Bucket名称。
    const URL = person.client.signatureUrl(item.OldUrl, { response });
    window.location.href=URL
}

3、哪里需要哪里调用

// 图片下载
const dowmClick=(item:any)=>{
    downLoad(item)
}

注：其中在uniapp调用时，需将const OSS = require('ali-oss'); 换成 import OSS from 'ali-oss' 的引入方式

方法三：window.location.href 或 window.open

window.location.href = url
或
window.open(url)

方法四：文件包的下载处理

1、在Uniapp中 进行POST请求 下载文件流，uni.request 中 responseType 默认是 “ text” ，请求时会将 “ 流格式 ” 处理成 “ 字符串 ”，所以下载的包文件格式是错的，会导致乱码。因此使用uni.request 设置responseType 为 “ arraybuffer ” 即可

export const Request=(options)=>{
	return new Promise((resolve, reject) => {
		const token = uni.getStorageSync('token');
		uni.request({
			url: config.host + options.url, //接口地址：前缀+方法中传入的地址
			method: options.method || 'GET', //请求方法：传入的方法或者默认是“GET”
			data: options.data || {}, //传递参数：传入的参数或者默认传递空集合
			header: {
				'Authorization':`Bearer ${token?token:''}`,
				'Content-Type':'application/json;charset=utf-8',
			},
			responseType:options.responseType || 'json', // 一定要设置为二进制的模式
			success: (res) => {
				resolve(res)
			},
			fail: (err) => {
				uni.showToast({
					title: '请求失败，请刷新',
					duration: 2000,
					icon: 'none'
				});
				reject(err)
			}
		})
	})
}

2、接口调用

// 资料库下载
export const getDownFile = (param) => {
	return Request({
		url: '​', // 接口地址
		method: 'POST',
		responseType: 'arraybuffer',
		data:param
	})
}

3、页面中使用该接口

    // 资料库下载
	let GetDownFile = (item : any) => {
        // 上传参数
		let obj = {
			FileName: person.FileName,
			KeyVals: person.KeyVals,
			ResourcesId: .....
		}
		getDownFile(obj).then((res : any) => {
			let filename = res.header['content-disposition'].split(';')[2].split("filename*=UTF-8''")[1];
			//创建一个隐藏的a链接
			const link = document.createElement("a");
			console.log(res.header['content-type'])
			let blob = new Blob([res.data], {type: res.header['content-type']});  //文件流处理
			link.style.display = "none";  //去除a标签的样式
			//设置连接
			link.href = window.URL.createObjectURL(blob);
			link.download = window.decodeURI(filename);
			document.body.appendChild(link);
			//模拟点击事件
			link.click();
			//移除创建的a标签
			document.body.removeChild(link);
			window.URL.revokeObjectURL(link.href);
		})
	}

    希望我的愚见能够帮助你哦~，若有不足之处，还望指出，你们有更好的解决方法，欢迎大家在评论区下方留言支持，大家一起相互学习参考呀~