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

发现问题

老大要让我实现下载xls文件的功能，我想了想：我好像不太会耶！

但是我们之前写的一个页面有一个下载xls的功能，那我就CV大法，嘿嘿嘿。

当我点击下载按钮的那一刻，控制台红了...，心想MMP

一样的代码不行，那个就能下载，我CV后变质了？

报错原因：TypeError: Failed to execute 'createObjectURL' on 'URL': Overload resolution failed.

我看了看网络请求，老大说传过来的数据没问题，可能是数据太大？

我看了好多好多好多好多博客，他们解决方案是对传过来的数据进行Blob处理后，那咱们试一试吧！

let blob = new Blob([res], {type: 'application/vnd.ms-excel'})
const url = window.URL.createObjectURL(res)

唉？可以下载了！但是表格内的数据都是乱码......

我这一想不行呀！都来看到某位掘友的博客，他的做法是在请求头加responseType: 'blob'

最终我成功的解决了这个问题，呜呜呜...

总结

在做大数据文件下载时，在请求头中加入 responseType: 'blob'，就可以解决下载和文件内乱码的问题了。

下面附上代码

// 文件下载 ——  <a> 标签方法下载
download(row.logUserId).then(res => {
  if (!res) {return}

  // 这里的blob处理可做可不做，我试了下，不做blob也可以下载且不乱码
  let blob = new Blob([res], {type: 'application/vnd.ms-excel'})

  const url = window.URL.createObjectURL(blob)
  const link = document.createElement('a')

  link.style.display = 'none'
  link.href = url

  // download 属性定义了下载链接的地址而不是跳转路径
  link.setAttribute('download', row.reportExcelLog.fileName+'.xls')
  document.body.appendChild(link)

  link.click()

  window.URL.revokeObjectURL(link.href) //释放url
  document.body.removeChild(link)//释放标签
})
// 请求
export function download(logUserId) {
  return request({
    url: prefix + '/download/by/log/user/id',
    method: 'post',
    data: {
      logUserId
    },
    // 这一步至关重要
    responseType: 'blob'
  })
}

到此这篇关于Vue不能下载xls以及文件乱码问题解决的文章就介绍到这了,更多相关Vue下载xls及文件乱码内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • vue中使用js-xlsx导出excel的实现方法

    目录 安装 第一种 第二种 第三种 安装 npm install --save xlsx file-saver 在组件里面引入 import FileSaver from 'file-saver' import XLSX from 'xlsx' 第一种 其中#outTable是在el-table上定义的id exportExcel() {       var xlsxParam = { raw: true };//转换成excel时,使用原始的格式       var wb = XLSX.uti

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

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

    发现问题 老大要让我实现下载xls文件的功能,我想了想:我好像不太会耶! 但是我们之前写的一个页面有一个下载xls的功能,那我就CV大法,嘿嘿嘿. 当我点击下载按钮的那一刻,控制台红了...,心想MMP 一样的代码不行,那个就能下载,我CV后变质了? 报错原因:TypeError: Failed to execute 'createObjectURL' on 'URL': Overload resolution failed. 我看了看网络请求,老大说传过来的数据没问题,可能是数据太大? 我看了

  • vue中如何下载excel流文件及设置下载文件名

    vue中如何下载excel流文件及设置下载文件名

    概述 导出excel需求,当点击下载模板或下载反馈结果,axios发起后端接口请求,返回的数据获取 response 时出现乱码,如图: 现总结如下几种处理方法. 1.通过 url 下载 即后端提供文件的地址,直接使用浏览器去下载 通过window.location.href = 文件路径下载 window.location.href = `${location.origin}/operation/ruleImport/template` 通过 window.open(url, '_blank'

  • 跨浏览器PHP下载文件名中的中文乱码问题解决方法

    本文实例讲述了跨浏览器PHP下载文件名中的中文乱码问题解决方法.分享给大家供大家参考.具体如下: 复制代码 代码如下: <?php $ua = $_SERVER["HTTP_USER_AGENT"]; $filename = "中文 文件名.txt"; $encoded_filename = urlencode($filename); $encoded_filename = str_replace("+", "%20",

  • 利用php下载xls文件(自己动手写的)

    利用php下载xls文件(自己动手写的)

    昨天看ECSHOP源码的时候,碰到了一点自己没有学过的只是--如何利用php实现下载xls文件.根据它的源码,我动手实现了一下,成功实现了这个效果. 源码: 复制代码 代码如下: <?php /* *@Description:下载xls表 * * */ function downloadXls($filename=''){ $filename = !empty($filename) ? $filename : die('nothing'); //header 的作用是 新建一个被下载的test.

  • jsp实现从服务器下载xls文件到客户端的方法

    本文实例讲述了jsp实现从服务器下载xls文件到客户端的方法.分享给大家供大家参考,具体如下: 参考网上的代码写了一个下载xls文件到客户端的jsp页面,只要将服务器的文件地址传给这个jsp页面就可以实现下载文件到客户端了. <%@ page language="java"import="java.util.*"pageEncoding="utf-8"%> <%@ taglib prefix="c"uri=&

  • Java实现ftp文件上传下载解决慢中文乱码多个文件下载等问题

    废话不多说了,直接给大家贴代码了,具体代码如下所示: //文件上传 public static boolean uploadToFTP(String url,int port,String username,String password,String path,String filename,InputStream input) { boolean success=false; FTPClient ftp=new FTPClient();//org.apache.commons.net.ftp

  • vue excel上传预览和table内容下载到excel文件中

    excel上传预览 这里会用到 npm i element-ui npm i xlsx 在vue的template中写上,排版和css看个人需求 <div> 选择文件 <input type="file" d="file_input" @change="importf(this)" accept=".csv, application/vnd.openxmlformats-officedocument.spreadshe

  • vue如何根据url下载非同源文件

    一般情况下,我们根据url下载文件时可以有以下两种方案: 1. window.open(url) 2. <a :href="url" rel="external nofollow" download="文件名称"/> 但是我们在开发过程中,有时会遇到后端返回的文件地址和我们的网站不是同源的情况下,使用以上两种方案下载图片.pdf等文件,浏览器会直接打开,而不是下载.下面这种方法就可以解决此类情况: 下载文件函数封装:(views/ut

  • Android实现下载m3u8视频文件问题解决

    目录 效果图 简介 Aria 导入Aria 介绍 启动Service DownloadService 下载回调 回调接口 单例Binder 构造单例 下载 辐射 创建下载实例 监听下载状态 效果图 简介 Aria 下载器采用开源框架Aria github 中文文档 导入Aria implementation 'me.laoyuyu.aria:core:3.8.16'    annotationProcessor 'me.laoyuyu.aria:compiler:3.8.16'    imple

  • vue与django(drf)实现文件上传下载功能全过程

    目录 文件上传功能 上传后端部分 上传前端部分(vue添加vue.js和node.js,设置eslint) 文件下载功能 下载后端部分 下载前端部分 总结 文件上传功能 上传后端部分 (一)Models.py from django.db import models class FilesModel(models.Model): //模型名(默认表名) name = models.CharField(max_length=20, default='') //name,fle是字段名(file为上

随机推荐