解决vue2.x导出blob流的excel乱码问题

项目场景:

解决vue2.x导出excel乱码的问题~~~~~

采用的UI框架的vuetify—,vue版本是2.x,导出excel是后端返回blob流,前端通过a标签下载


问题描述

注释mock,requestType: blob, 文件类型都试过了,反正下载下来乱码,后端测试下载是完全Ok的。

下面说下解决办法,这个办法是和后端协商解决的,具体咋处理,就不知道了,发表此文章的目的在于记录奇怪bug, 加了个请求头Download-Request


//这个是请求
axios()
      .post(url, data, {
        headers: {
          'Content-Type': 'application/json;charset=UTF-8',
          'Download-Request': 'Download-Request', //多加的请求头
        },
        timeout: 60000,
        responseType: 'blob',
      })
//具体下载方法
 exportEntity(url, params)
    .then((res) => {
      // 将文件流转成blob形式
      const blob = new Blob([res.data], {
        type: 'application/octet-stream;charset=utf-8',
      });
      // const blob = res.data;
      let filename = fileName + '.xls';
      // 创建一个超链接,将文件流赋进去,然后实现这个超链接的单击事件
      const elink = document.createElement('a');
      elink.download = filename;
      elink.style.display = 'none';
      elink.href = URL.createObjectURL(blob);
      document.body.appendChild(elink);
      elink.click();
      URL.revokeObjectURL(elink.href); // 释放URL 对象
      document.body.removeChild(elink);
    })


  • 2
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要在Vue 2.x中使用Element UI来导入和导出Excel,你需要安装element-ui和file-saver插件。 首先,在Vue项目中使用npm或yarn安装Element UI和file-saver插件: ``` npm install element-ui file-saver --save ``` 然后,在Vue组件中引入所需的文件: ```javascript import { Button, Table } from 'element-ui' import XLSX from 'xlsx' import FileSaver from 'file-saver' ``` 在组件中,你需要定义导入和导出Excel的方法。下面是一个简单的示例: ```javascript methods: { // 导入Excel handleImportExcel(file) { const reader = new FileReader() reader.onload = (e) => { const data = new Uint8Array(e.target.result) const workbook = XLSX.read(data, { type: 'array' }) const worksheet = workbook.Sheets[workbook.SheetNames[0]] const jsonData = XLSX.utils.sheet_to_json(worksheet, { header: 1 }) // 处理导入的Excel数据 console.log(jsonData) } reader.readAsArrayBuffer(file.raw) }, // 导出Excel handleExportExcel() { const jsonData = [ ['姓名', '年龄', '性别'], ['张三', 18, '男'], ['李四', 20, '女'] ] const worksheet = XLSX.utils.aoa_to_sheet(jsonData) const workbook = XLSX.utils.book_new() XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1') const excelBuffer = XLSX.write(workbook, { bookType: 'xlsx', type: 'array' }) const excelData = new Blob([excelBuffer], { type: 'application/octet-stream' }) FileSaver.saveAs(excelData, 'example.xlsx') } } ``` 最后,在模板中使用Element UI的Button和Table组件,分别绑定导入和导出Excel的方法: ```html <template> <div> <el-button type="primary" @change="handleImportExcel">导入Excel</el-button> <el-table :data="tableData"> <!-- 表格内容 --> </el-table> <el-button type="success" @click="handleExportExcel">导出Excel</el-button> </div> </template> ``` 这样,你就可以在Vue项目中使用Element UI来导入和导出Excel了。当用户选择一个Excel文件时,`handleImportExcel`方法将会被触发,并将Excel数据转换为JSON数据进行处理。而`handleExportExcel`方法则会将JSON数据转换为Excel文件并进行下载。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值