首页 > 其他分享 >vue 下载文件

vue 下载文件

时间:2024-11-24 22:11:37浏览次数:7  
标签:文件 tempLink vue const url xhr blob document 下载

excelExportTemplateBtn: function (){
const url=‘下载方法路径’
      
        this.getBlob(url).then(blob => {
          this.saveAs(blob, 'test.xlsx')
        })
}
		
getBlob: function (url, options = {}) {
        return new Promise(resolve => {
        const xhr = new XMLHttpRequest()
        xhr.open('GET', url, true)
        xhr.responseType = 'blob'
        xhr.onload = () => {
          if (xhr.status === 200) {
            resolve(xhr.response)
          }
        }

        xhr.send()
      })
      },
	  
 saveAs: function(blob, filename) {
        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);
      }

标签:文件,tempLink,vue,const,url,xhr,blob,document,下载
From: https://www.cnblogs.com/zwgblogs/p/18566519

相关文章

  • Vue (一)
    Vue简介Vue是什么?一套用于构建用户界面的渐进式JavaScript框架构建用户界面:将数据解析成界面渐进式:Vue可以自低向上逐层的应用1.简单应用:只需一个轻量小巧的核心库2.复杂应用:可以引入各式各样的Vue插件vue的特点1.组件化模式,提高代码复用率,且让代码更好维护2.声明式编......
  • 头文件包含
    大家好,今天我们来聊聊头文件包含这方面的知识,并且在这里提出几个问题,头文件多次包含有什么影响吗?“”和〈〉这两种方式都能包含标准头文件吗?一.文件包含#include指令可以使另外一个文件被编译。就像它实际出现于#include指令的地方一样。替换方式:预处理器先删除这条指令,并且......
  • vscode如何更改文件语言模式为json格式
    前言大家好,我是小徐啊。vscode是一款常用的开发工具,非常适合前端开发,但同时,它也适合后端开发。比如Java,可以通过安装一些插件的方法,来支持开发Java。而且,它还能帮助我们快速处理一些文本,比如将json形式的文本,格式化,方便查看等。今天,小徐就来介绍下如何用vscode更改文件语言模式为......
  • 视野修炼-技术周刊第111期 | 读文件 API 性能对比
    欢迎来到第111期的【视野修炼-技术周刊】,下面是本期的精选内容简介......
  • 【Z240005】基于SpringBoot+Vue+MySQL实现的家具电子商城系统的设计与实现
    基于SpringBoot+Vue实现的家具电子商城系统1.项目描述2.运行环境3.项目技术4.界面展示5.源码获取1.项目描述基于SpringBoot+Vue实现的家具商城系统分为管理员端和用户端,管理员实现了个人中心、用户管理、家具类型管理、家具信息管理、轮播图管理、公告管理、订单管......
  • [Vue] Routes auto generator
    Needtofollowsomerules:Eachfoldershouldhasapage.jsconfigurationtosavethemetadata.//page.jsexportdefault{title:"About",menuOrder:1,}; Generator.js:constpages=import.meta.glob('../views/**/page.js'......
  • 基于SpringBoot+Vue的网上书店系统的设计与实现(源码+lw+部署+讲解)
    文章目录1.前言2.详细视频演示3.具体实现截图4.技术可行性分析5.技术简介5.1后端框架SpringBoot5.2前端框架Vue5.3系统开发平台6.系统架构设计7.程序操作流程8.业务流程设计9.为什么选择我们9.1自己的公众号9.2海量实战案例10.代码参考11.数据库参考12.源码及文档获取......
  • 基于SpringBoot+Vue的数码产品商城系统的设计与实现(源码+lw+部署+讲解)
    文章目录1.前言2.详细视频演示3.具体实现截图4.技术可行性分析5.技术简介5.1后端框架SpringBoot5.2前端框架Vue5.3系统开发平台6.系统架构设计7.程序操作流程8.业务流程设计9.为什么选择我们9.1自己的公众号9.2海量实战案例10.代码参考11.数据库参考12.源码及文档获取......
  • Metasploit Pro 4.22.5-2024111401 发布下载,新增功能概览
    MetasploitPro4.22.5-2024111401发布下载,新增功能概览MetasploitPro4.22.5-2024111401(Linux,Windows)-专业渗透测试框架Rapid7Penetrationtesting,releasedNov14,2024请访问原文链接:https://sysin.org/blog/metasploit-pro-4/查看最新版。原创作品,转载......
  • 下载公司年报及财报
      下载平安银行半年报importrequestsimportpandasaspdimportos#请求头headers={"accept":"*/*","accept-language":"zh-CN,zh;q=0.9,en;q=0.8","content-type":"application/x-www-form-urlen......