Vue不能下载xls以及文件乱码问题解决

下面我来详细讲解Vue不能下载xls以及文件乱码问题的解决方法。

问题描述

在Vue项目中，可能出现下载xls文件时出现乱码或者无法下载的情况。这是因为Vue框架默认的数据传输格式是JSON，无法直接传输二进制文件，需要经过一定的处理解决才能实现文件下载。

解决方法

解决Vue不能下载xls以及文件乱码问题，需要进行以下几个步骤：

1. 设置服务端响应头

在服务端响应头中设置Content-Type和Content-Disposition，其中Content-Type为文件类型，Content-Disposition为在浏览器中弹出下载框的设置。代码如下：

let filename = 'test.xls'; // 文件名
res.setHeader('Content-Type', 'application/vnd.ms-excel;charset=utf-8');
res.setHeader('Content-Disposition', 'attachment;filename=' + encodeURIComponent(filename));

2. 将文件流转化为blob对象

在前端中，我们需要将服务端返回的二进制流文件转化为blob对象，代码如下：

let blob = new Blob([res.data], { type: 'application/vnd.ms-excel' });
let downloadElement = document.createElement('a');
let href = window.URL.createObjectURL(blob); // 创建下载链接
downloadElement.href = href;
downloadElement.download = filename; // 下载后文件名
document.body.appendChild(downloadElement);
downloadElement.click();
document.body.removeChild(downloadElement); // 下载完成移除元素
window.URL.revokeObjectURL(href); // 释放掉URL对象

将blob对象转化为URL，然后生成一个a标签，设置下载链接和下载文件名，最后模拟点击下载链接实现文件下载。

3. 处理乱码问题

有时候在下载xls文件时，会出现中文乱码的情况。此时需要在服务端设置charset为utf-8，同时将文件名使用encodeURIComponent进行编码，代码如下：

let filename = '测试.xls'; // 文件名为中文
res.setHeader('Content-Type', 'application/vnd.ms-excel;charset=utf-8');
res.setHeader('Content-Disposition', 'attachment;filename=' + encodeURIComponent(filename));

在前端使用decodeURIComponent进行解码，代码如下：

let downloadElement = document.createElement('a');
let href = window.URL.createObjectURL(blob); // 创建下载链接
downloadElement.href = decodeURIComponent(href);
downloadElement.download = decodeURIComponent(filename); // 下载后文件名
document.body.appendChild(downloadElement);
downloadElement.click();
document.body.removeChild(downloadElement); // 下载完成移除元素
window.URL.revokeObjectURL(href); // 释放掉URL对象

示例说明

示例一

下面是一个使用axios进行文件下载的示例：

downLoadExcel() {
  axios({
    method: 'get',
    url: `/api/excel`,
    responseType: 'arraybuffer'
  }).then((res) => {
    let blob = new Blob([res.data], { type: 'application/vnd.ms-excel' });
    let filename = 'test.xls';
    let downloadElement = document.createElement('a');
    let href = window.URL.createObjectURL(blob); // 创建下载链接
    downloadElement.href = href;
    downloadElement.download = filename;
    document.body.appendChild(downloadElement);
    downloadElement.click();
    document.body.removeChild(downloadElement); // 下载完成移除元素
    window.URL.revokeObjectURL(href); // 释放掉URL对象
  }).catch((error) => {
    console.log(error);
  });
}

示例二

下面是一个使用fetch进行文件下载的示例：

downLoadExcel() {
  fetch(`/api/excel`, {
    method: 'GET',
    headers: {
      'Content-Type': 'application/json;charset=utf-8'
    }
  }).then(res => {
    let filename = 'test.xls';
    res.blob().then(blob => {
      let downloadElement = document.createElement('a');
      let href = window.URL.createObjectURL(blob); // 创建下载链接
      downloadElement.href = href;
      downloadElement.download = filename;
      document.body.appendChild(downloadElement);
      downloadElement.click();
      document.body.removeChild(downloadElement); // 下载完成移除元素
      window.URL.revokeObjectURL(href); // 释放掉URL对象
    })
  }).catch((error) => {
    console.log(error);
  })
}

以上就是Vue不能下载xls以及文件乱码问题的详细解决攻略，希望能对你有所帮助。