vue下载文件以及文件重命名方式

 更新时间:2022年10月22日 17:12:19   作者:hyfadd  
这篇文章主要介绍了vue下载文件以及文件重命名方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

vue下载文件及文件重命名

http Content-type对照表大家自行百度

/**
 * 下载文件以及文件重命名
 * @param item 文件在数据库中存储信息
 * @param that this别名
 */
export function downFile(item, that) {
    // xxx是后台接口, yyy是后台需要的数据
    // {responseType: 'blob'}必须添加,否则下载的文件会出现乱码
    that.$axios.post('xxx', {
        yyy
    },
    {
        responseType: 'blob'
    }).then(res = >{
        if (res.status === '0') {
            let types = ''
            // 判断文件类型,补充type
            if (item.file_type === 'xlsx' || item.file_type === 'xls') {
                types = 'application/vnd.ms-excel'
            } else if (item.file_type === 'png') {
                types = 'application/x-png'
            } else if (item.file_type === 'jpg') {
                types = 'application/x-jpg'
            } else if (item.file_type === 'jpeg') {
                types = 'image/jpeg'
            }
            // res.data是后台返回的二进制数据,type:types为下载的数据类型
            const blob = new Blob([res.data], {
                type: types
            }) const downLoadEle = document.createElement('a') const href = URL.createObjectURL(blob) downLoadEle.href = href
            // ooo为自定义文件名
            downLoadEle.download = 'ooo'document.body.appendChild(downLoadEle) downLoadEle.click() document.body.removeChild(downLoadEle) window.URL.revokeObjectURL(href)
        }
    })
}

页面引用即可

import {downFile} from '.xx/xxx/xxx'
click(item) {
	const that = this
	downFile(item, that)
} 

vue项目如何改名

在对应的文件资源管理器中重命名到你想要更改的名字(比如这里从hello改成vuejs2)

把项目的node_modules文件夹删除(就是删掉你这个文件夹已有的依赖,别慌,过会可以重新下回来)

找到项目中的package.json文件,

然后重新加载一下依赖项,在对应目录的cmd输入npm install

等依赖加载完后,项目就成功重命名了!!

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • 使用vue实现加载页

    使用vue实现加载页

    这篇文章主要为大家详细介绍了使用vue实现加载页,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-07-07
  • vue解决跨域问题的几种常用方法(CORS)

    vue解决跨域问题的几种常用方法(CORS)

    在Vue中解决跨域问题有多种方法,今天通过本文给大家介绍几种比较常见的方法,对vue解决跨域问题感兴趣的朋友跟随小编一起看看吧
    2023-05-05
  • vue实现顶部导航栏以及跳转

    vue实现顶部导航栏以及跳转

    这篇文章主要介绍了vue实现顶部导航栏以及跳转方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-09-09
  • vue和H5 draggable实现拖拽并替换效果

    vue和H5 draggable实现拖拽并替换效果

    这篇文章主要为大家详细介绍了vue和H5 draggable实现拖拽并替换效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-07-07
  • vue中vue-cli项目报错sockjs.js报错问题

    vue中vue-cli项目报错sockjs.js报错问题

    这篇文章主要介绍了vue中vue-cli项目报错sockjs.js报错问题,具有很好的参考价值,希望对大家有所帮助。
    2022-12-12
  • Vue如何为GET或POST请求设置请求头

    Vue如何为GET或POST请求设置请求头

    这篇文章主要介绍了Vue如何为GET或POST请求设置请求头,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-04-04
  • vue的状态管理模式vuex

    vue的状态管理模式vuex

    本篇文章主要介绍了深入理解vue的状态管理模式vuex,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-11-11
  • 在antd Form表单中select设置初始值操作

    在antd Form表单中select设置初始值操作

    这篇文章主要介绍了在antd Form表单中select设置初始值操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-11-11
  • Vue监听页面刷新和关闭功能

    Vue监听页面刷新和关闭功能

    我在做项目的时候,有一个需求,在离开(跳转或者关闭)购物车页面或者刷新购物车页面的时候向服务器提交一次购物车商品数量的变化。这篇文章主要介绍了vue监听页面刷新和关闭功能,需要的朋友可以参考下
    2019-06-06
  • vue3.0中使用postcss-pxtorem的具体方法

    vue3.0中使用postcss-pxtorem的具体方法

    这篇文章主要介绍了vue3.0中使用postcss-pxtorem的具体方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-11-11

最新评论