vue中文件下载功能实现

在浏览器内输入可以在线预览文件格式时,会直接展示文件预览内容,但是不支持的预览是直接下载文件的。所以浏览器不支持的预览的文件格式,可以直接通过a标签来下载,但是支持预览的文件,就需要进行一次处理才可以实现下载。

        /**
         * @description: 将下载链接转换为blob链接
         * @param {*} url 下载链接
         * @param {*} filename 文件名称
         * @return {*}
         */
        handlePdfLink(url, filename) {
            fetch(url, {
                method: 'get',
                responseType: 'arraybuffer',
            }).then((res) => {
                if (res.status !== 200) {
                    return res.json();
                }
                return res.arrayBuffer();
            }).then((blobRes) => {
                const e = new Blob([blobRes], {
                    type: 'application/octet-stream',
                    'Content-Disposition': 'attachment',
                });
                // 将 Blob 对象转为 url
                const link = window.URL.createObjectURL(e);
                this.handleFileDownload(link, filename);
            });
        },
         /**
         * @description: 下载文件
         * @param {*} url   下载链接
         * @param {*} filename 下载文件名称
         * @return {*}
         */
        handleFileDownload(url, filename) {
            // 创建 a 标签
            const link = document.createElement('a');
            link.href = url;
            link.download = filename;
            link.click();
            this.fullscreenLoading = false;
        },
        
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
本课程讲了Vue3+Vue2+Uni-app(uniapp)入门基础与实战,其还重点讲解了ES6、TypeScript这些基础知识,实战由两大价值5000元的真实企业级项目组成,分别是仿京东电商网站和仿美团微信点餐小程序,同时两大项目代码全部赠送,还赠送前后端架构模板,工作直接使用。VUE和uni-app是目前热门的前端框架,本课程教你如何快速学会VUE和uni-app并应用到实战,教你如何解决内存泄漏,常用UI库的使用,自己封装组件和插件,正式上线白屏问题,性能优化、解决iphoneX“刘海”兼容性问题、微信支付、微信授权登录,获取位置在地图上显示,获取用户所在的城市和街道信息,微信小程序发布审核等。对正在工作当或打算学习VUE和uni-app高薪就业的你来说,那么这门课程便是你手的葵花宝典。学习技巧:学习当不要只看,一定要多敲代码,如果碰到某一个知识点不是很明白,不要钻牛角尖,千万不要因为一个点,放弃整个森林,接着往下学,硬着头皮开发项目。只要能亲自开发一个完整的项目,你会发现不明白的地方自然而然就明白了,项目做出来就真正的学会了。此vue和uni-app课程以面试和实战为基础进行讲解,每个知识点都会让你知道在实际项目开发如何使用,学习后,可以开发大型项目,增强逻辑思维,至少让你拥有3年以上开发经验的实力!代码和ppt均可下载!免费提供《企业级完整实战项目接口文档》,绝对可用
要在Vue实现文件管理功能,可以按照以下步骤进行: 1. 设计数据结构 首先需要设计数据结构,包括文件夹和文件的属性,例如文件名、大小、创建时间等。 2. 创建文件夹和文件列表组件 创建文件夹和文件列表组件,用于展示当前目录下的所有文件夹和文件。可以使用Vue的v-for指令来遍历文件夹和文件列表,并使用v-bind指令来绑定属性。 3. 实现文件上传和下载功能 为了上传和下载文件,需要使用Vue的组件库或第三方库。可以使用vue-file-upload组件库来实现文件上传功能,使用vue-file-download组件库来实现文件下载功能。 4. 实现文件删除功能 为了删除文件,需要在文件列表组件添加删除按钮,并使用Vue的事件处理机制来监听按钮点击事件。当用户点击删除按钮时,应该提示用户确认是否删除文件,并使用Vue的v-if指令来控制是否显示确认对话框。 5. 实现文件搜索功能 为了实现文件搜索功能,需要在文件列表组件添加搜索框,并使用Vue的v-model指令来实现双向数据绑定。当用户输入搜索关键字时,应该重新渲染文件夹和文件列表,只显示匹配的文件夹和文件。 6. 实现文件重命名功能 为了实现文件重命名功能,需要在文件列表组件添加重命名按钮,并使用Vue的事件处理机制来监听按钮点击事件。当用户点击重命名按钮时,应该弹出重命名对话框,并使用Vue的v-if指令来控制是否显示对话框。当用户输入新的文件名时,应该更新文件的属性,并重新渲染文件夹和文件列表。 7. 实现文件移动功能 为了实现文件移动功能,需要在文件列表组件添加移动按钮,并使用Vue的事件处理机制来监听按钮点击事件。当用户点击移动按钮时,应该弹出移动对话框,并使用Vue的v-if指令来控制是否显示对话框。当用户选择要移动到的目录时,应该更新文件的属性,并重新渲染文件夹和文件列表。 以上是在Vue实现文件管理功能的基本步骤,具体实现细节可以根据实际需求进行调整。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值