Vue 通过url下载文件并对下载的文件更名

HTML如下：

 <div @click="downloadFile(url,name)">点击下载</div>

filename可以根据需要的内容进行拼接，比如name + id、name + 时间，这样就容易区分下载的文件了。
比如使用name+id，那么在downloadFile(url,name+id)这样就可以了。

methods里面方法如下：

 downloadFile (url, filename) {function getBlob (url) {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();});}//下载文件function saveAs (blob, filename) {const elelink = document.createElement("a");elelink.style.display = 'none';elelink.download = filename;console.log(url, filename)elelink.href = window.URL.createObjectURL(blob);document.body.appendChild(elelink);elelink.click();document.body.removeChild(elelink);}// 调用以上方法进行下载getBlob(url).then(blob => {saveAs(blob, filename);});},

Vue 通过url下载文件并对下载的文件更名相关推荐

Vue 通过url下载文件并修改文件名称
封装一个通用的方法在需要使用的页面引入 /*** 通过url下载文件并对下载的文件更名* @param {*} url * @param {*} filename */ export const d ...
elementui 按钮表单_前后端分离，文件上传下载（springBoot+vue+elementUI）
1.介绍本文主要是介绍前后端分离的上传下载,后端使用的是SpringBoot,持久层用的是mybatis-plus,前端用的Vue,UI用的elementUI,测试了一下,文本,图片,excel,都 ...
vue实现下载EXCEL模板、导入EXCEL文件
vue实现下载EXCEL模板.导入EXCEL文件在项目中很常见需要先下载模板,根据模板导入下面展示一些下载模板代码片段. 需要有一个下载模板的接口,点击下载触发函数,调用接口,返回下载地址接口 ...
vue 接收后端文件流并下载
在vue框架中, 接收并下载文件流(blob对象) 可以通过将其转成blob对象,添加到a标签或者iframe标签中来模拟下载(或者pdf预览) 1.首先设置responseType对象格式为 blo ...
Vue + Element+ ASP.NET Core WebAPI 文件上传下载
以ASP.NET Core WebAPI 作后端 API ,用 Vue 构建前端页面,用 Axios 从前端访问后端 API ,包括文件的上传和下载. 准备asp.net后端文件上传的API Uplo ...
vue+element-ui+axios+springboot实现文件上传下载
前端技术:vue,element-ui,axios 后台技术:springboot 本篇博客只给出关键的代码,提供思路,完全的涉及保密不方便提供一,上传: 上传element组件代码,支持多文件,拖 ...
Vue+wangeditor富文本+element——--上传+下载文件+图片预览
一:上传文件 HTML <el-upload class="upload-demo" action="haircut/upload" :on-previe ...
通过url地址批量打包zip下载文件
通过url地址批量打包zip下载文件 controller @ApiOperation("通过下载url批量打包zip下载")@PostMapping("batchDow ...
华为云OBS对象存储使用临时URL访问，并对下载文件重命名
目录解读 1.使用临时URL访问OBS,并获取临时URL 官方文档举例 2.使用临时URL访问OBS,并对临时URL下载的文件重命名分析举例解读在使用OBS进行对云上文件进行下载的时候,发 ...

Vue 通过url下载文件并对下载的文件更名

Vue 通过url下载文件并对下载的文件更名

Vue 通过url下载文件并对下载的文件更名相关推荐

最新文章

热门文章