首页 > 其他分享 >vue 导出方法blob文件流

vue 导出方法blob文件流

时间:2023-03-27 20:17:57浏览次数:38  
标签:vue const res 导出 filename href blob downloadElement

axios({
       method: 'get',
       url,
       params,
       headers: {
         'Content-Type': 'application/json; application/octet-stream'
       },
       responseType: 'blob',//这里要注意
       timeout: 100000
     }).then((res) => {
       exportFile(res,'文件.xlsx')
     }).catch(err => {
       reject(err.data)
     })
export function exportFile(res,filename) {
  const str = res.type['application/vnd.ms-excel']
  if (str) {
    console.log('strstrstr',str)
    filename = str.match(/filename=(\S*?)(;|$)/)[1]
  }
  filename = filename || '未命名'
  if ('download' in document.createElement('a')) {
    // 支持a标签download的浏览器
    const downloadElement = document.createElement('a')
    // 谷歌新版本的写法
    // const binaryData = []
    // binaryData.push(res.data)
    const href = window.URL.createObjectURL(new Blob([res]))

    // const href = window.URL.createObjectURL(res.data) // 创建下载的链接
    downloadElement.href = href 
    downloadElement.download = decodeURI(filename) // 下载后文件名
    document.body.appendChild(downloadElement)
    downloadElement.click() // 点击下载
    document.body.removeChild(downloadElement) // 下载完成移除元素
    window.URL.revokeObjectURL(href) // 释放掉blob对象
  } else {
    // 其他浏览器
    navigator.msSaveBlob(blob, fileName)
  }
}

标签:vue,const,res,导出,filename,href,blob,downloadElement
From: https://www.cnblogs.com/cyapi/p/17262668.html

相关文章

  • vue2+element-ui+springboot+mybatis-plus获取当前账户进行修改密码详细教程
    以下内容仅供学习使用新建一个dto类,用于专门修改当前账户的使用importlombok.Data;@DatapublicclassUserPasswordDTO{privateStringusername;priva......
  • Vue 核心(二)
    目录Vue核心(二)八、绑定样式1、class2、style九、条件渲染1、渲染指令2、使用示例十、列表渲染1、基本语法2、key原理3、列表过滤4、列表排序5、数组更新检测6......
  • delphi TMS FlexCel 设置页面布局(打印、导出调整为合适大小)
    TMSFlexCel设置页面布局(打印、导出调整为合适大小)属性和方法TXlsFile.PrintScalepropertyTXlsFile.PrintScale:Integer页面布局中的缩放比例,扩大/缩小工作表的百......
  • 使用Net将HTML简历导出为PDF格式
    现在有许多将HTML导出PDF的第三方包,这里介绍使用的是Select.HtmlToPdf.NetCore使用Select.HtmlToPdf.NetCore整体思路是将cshtml内容读出来,然后再转为Pdf文档读取cshtm......
  • vue使用&Mac+idea的vue开发环境配置参考
    vue使用&Mac+idea的vue开发环境配置参考链接:https://blog.csdn.net/weixin_43123409/article/details/125624203......
  • 记录--Vue 3 中的极致防抖/节流(含常见方式防抖/节流)
    这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助今天给大家带来的是Vue3中的极致防抖/节流(含常见方式防抖/节流)这篇文章,文章中不仅会讲述原来使用的防抖......
  • Vue中路由的创建、跳转
    一、创建路由1、先创建一个route.js文件,创建路由,导出路由。//创建路由,从vue-router中导入两个方法。import{createWebHistory,createRouter}from"vue-r......
  • 使用copilot生成vue响应式原理
    //生成vue的响应式原理functiondefineReactive(obj,key,val){//递归observe(val);//创建Dep实例constdep=newDep();Object.defineProperty(obj......
  • vuex
    笔记脚手架文件结构├──node_modules├──public│├──favicon.ico:页签图标│└──index.html:主页面├──src│├──assets:存放静态......
  • vue3
    Vue3快速上手1.Vue3简介2020年9月18日,Vue.js发布3.0版本,代号:OnePiece(海贼王)耗时2年多、2600+次提交、30+个RFC、600+次PR、99位贡献者github上的tags地址:https://gi......