VUE下载文件并修改文件名

通常js下载文件并修改文件名大部分人认为是不行的,那么今天给大家带来一个可行的方法

首先我们下载文件时使用接口请求的方式

import axios from 'axios'
export const downloadFile = (url, filename) =>
  axios
    .get(url, {
      responseType: 'blob',
    })
    .then((res) => {
      const blob = new Blob([res.data], { type: 'application/vnd.ms-excel' }) // 构造一个blob对象来处理数据,并设置文件类型
      if (window.navigator.msSaveOrOpenBlob) {
        // 兼容IE10
        navigator.msSaveBlob(blob, filename)
      } else {
        const href = URL.createObjectURL(blob) // 创建新的URL表示指定的blob对象
        const a = document.createElement('a')
        a.style.display = 'none'
        a.href = href // 指定下载链接
        a.download = filename // 指定下载文件名
        a.click()
        URL.revokeObjectURL(a.href) // 释放URL对象
      }
    })

大家可以试试

downloadFile('http://xxx.xx.xx/abc.xlsx', 'test.xlsx')

 

你可以使用 Vue.js 的 axios 库来下载文件,并通过修改 `Content-Disposition` 头部来更改文件名。下面是一个示例代码: ```javascript // 导入axios库 import axios from 'axios'; // 定义下载文件的函数 function downloadFile(url, filename) { axios({ url: url, method: 'GET', responseType: 'blob' // 设置响应类型为blob }).then(response => { const blob = new Blob([response.data]); if (typeof window.navigator.msSaveBlob !== 'undefined') { // 兼容IE,使用msSaveBlob方法进行下载 window.navigator.msSaveBlob(blob, filename); } else { // 创建一个临时的URL对象,并指定下载文件的名称 const url = window.URL.createObjectURL(blob); const link = document.createElement('a'); link.href = url; link.download = filename; // 模拟点击下载链接 link.click(); // 释放临时的URL对象 window.URL.revokeObjectURL(url); } }); } // 调用下载文件的函数 downloadFile('http://example.com/file.pdf', 'newfilename.pdf'); ``` 在上面的代码中,我们首先导入了 axios 库,然后定义了一个名为 `downloadFile` 的函数。该函数接受两个参数:文件的 URL 和要更改的文件名。 在函数内部,我们使用 axios 发起 GET 请求,设置响应类型为 `blob`,以便获取文件的二进制数据。然后,我们创建一个 `Blob` 对象,并根据浏览器支持情况使用不同的方法进行文件下载。 如果浏览器支持 `msSaveBlob` 方法(如IE),我们使用该方法进行下载。否则,我们创建一个临时的 URL 对象,并将其赋值给一个新创建的 `<a>` 元素的 `href` 属性。然后设置 `download` 属性为要更改的文件名,并模拟点击链接进行下载。 最后,我们释放临时的 URL 对象,以便在下载完成后清理资源。 你可以根据自己的需求调整代码中的 URL 和文件名,以适配你的应用。
评论 7
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值