vben框架下载文件功能后台接口返回数据流的形式下载成功之后打不开xlsx文件解决

原创已于 2022-09-02 15:31:15 修改 · 1.1k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #typescript

于 2022-09-02 15:29:55 首次发布

本文主要介绍了在Vue3.0框架下，如何配置axios的responseType为'blob'以接收后台返回的数据流，并通过数据流下载xlsx文件。当遇到下载后文件无法打开的问题时，解决方案是确保data参数为Blob类型，并使用提供的downloadByData方法进行下载。该方法接收Blob数据、文件名、MIME类型和BOM作为参数，创建并触发下载。

vue3.0前端开源框架vben请求接口配置返回内容数据类型

返回内容配置responseType的值共有一下几种：
(1) arraybuffer
(2) blob
(3) document
(4) json
(5) text
(6) stream

问题描述：下载文件功能后台接口返回数据流的形式下载成功之后打不开xlsx文件

解决方式：直接代码

	export const downNumbers = (params?: any) =>
 	 defHttp.post<any>(
    	{ url: Api.downNumbers, params, responseType: 'blob' },
    	{ errorMessageMode: 'none', isTransformResponse: false },
 	 );

注: 配置项 reponseType:’ 'blob '*为关键必须配置，因为需要使用vben框架封装的数据流转文件方法，代码如下：

/**
 * Download according to the background interface file stream
 * @param {*} data
 * @param {*} filename
 * @param {*} mime
 * @param {*} bom
 */
export function downloadByData(data: BlobPart, filename: string, mime?: string, bom?: BlobPart) {
  const blobData = typeof bom !== 'undefined' ? [bom, data] : [data];
  const blob = new Blob(blobData, { type: mime || 'application/octet-stream' });

  const blobURL = window.URL.createObjectURL(blob);
  const tempLink = document.createElement('a');
  tempLink.style.display = 'none';
  tempLink.href = blobURL;
  tempLink.setAttribute('download', filename);
  if (typeof tempLink.download === 'undefined') {
    tempLink.setAttribute('target', '_blank');
  }
  document.body.appendChild(tempLink);
  tempLink.click();
  document.body.removeChild(tempLink);
  window.URL.revokeObjectURL(blobURL);
}