Vue实现下载及文件重命名

效果如下：

 

 实现步骤：

html： 

<el-table-column prop="name" label="操作" align="center" header-align="center" width="165">
    <template slot-scope="scope">
        <el-button type="text" size="small" @click="downloadExport(scope.row)">下载</el-button>
    </template>
</el-table-column>

JS： 

downloadExport(row){
    var nowTime = new Date().UTF2()
    let url = process.env.BASE_Url+encodeURI(row.fileUri)
    const config = {
        methods:'get',
        url:url,
        responseType:'blob'
    }
    axios(config).then((res)=>{
        const link = document.createElement('a')
        const url = window.URL.createObjectURL(new Blob([res.data],{ type: 'application/vnd.ms-excel' }))
        link.setAttribute("href",url);
        link.setAttribute('download',row.origin + '_'+nowTime+'xlsx')
        link.click()
    })
}

代码解析：

因为需求是：不仅要实现下载，而且所下载的文件名需要自定义（文件名+时间）

我这里做了时间的格式化

var nowTime = new Date().UTF2()   

当前下载文件的路径

let url = process.env.BASE_Url+encodeURI(row.fileUri)    

调用参数

const config  

生成一个a标签

const link = document.createElement('a')      

创建一个对象

window.URL.createObjectURL(new Blob([res.data],{ type: 'application/vnd.ms-excel' }))       

bold参数是一个file对象或者bold对象

objectURL是生成的对象URL，通过这个URL，可以获取到所指定文件的完整内容

如果不指定文件类型的话，默认为txt类型，反正我是遇到了，所以我制定了文件类型

{ type: 'application/vnd.ms-excel' }

增加一个指定名称和值的新属性，或者把一个现有属性设定为指定的值

        这里是给创建的 a 标签增加属性href和值url

        格式：

                name：要设置的属性名

                value:要设置的属性值

link.setAttribute("href",url);

再给创建的a标签指定 download 属性，并且拼接文件名及时间

link.setAttribute('download',row.origin + '_'+nowTime+'xlsx')

最后让创建的新属性触发点击事件

link.click()