一、实现效果

二、知识铺垫

Blob

Blob对象表示一个不可变、原始数据的类文件对象。

语法

const blob=new Blob(array,options)

参数

array是一个由ArrayBuffer,ArrayBufferView,Blob,DOMSting等对象构成的Array.DOMString会被编译成UTF-8
options是一个可选的字典，可以指定以下属性：
type放入blob中数组内容的MIME类型
endings指定结束符如何被改写。（1）默认transparent，保持blob的换行符（2）native,更改适合操作系统的换行符

MIME

多用途Internet邮件扩展类型（MIME），是浏览器来确定文件处理类型的方式，而不是后缀名

语法

type/subtype

参数

type类型的种类
subtype具体的类型

具体类型如下：

类型	描述	典型示例
text	表明文件是普通文本，理论上是人类可读	text/plain, text/html, text/css, text/javascript
image	表明是某种图像。不包括视频，但是动态图（比如动态gif）也使用image类型	image/gif, image/png, image/jpeg, image/bmp, image/webp, image/x-icon, image/vnd.microsoft.icon
audio	表明是某种音频文件	audio/midi, audio/mpeg, audio/webm, audio/ogg, audio/wav
video	表明是某种视频文件	video/webm, video/ogg
application	表明是某种二进制数据	application/octet-stream, application/pkcs12, application/vnd.mspowerpoint, application/xhtml+xml, application/xml, application/pdf

三、代码实现

样式我就不在这里展开了，主要为js代码实现核心，点击按钮，执行download方法。

dowload() {
    if (!this.content) {
        uni.showToast({
            title: '请输入内容',
            icon: 'none'
            })
        return
        }
    if (!this.fileName) {
        uni.showToast({
            title: '请输入文件名',
            icon: 'none'
            })
        return
        }
    let ele = document.createElement('a');
    let blob = new Blob([this.content], {
            type: 'text/plain'
        });
    let url = URL.createObjectURL(blob);
    ele.href = url;
    ele.download = this.fileName;
    ele.click();
}

创建a链接，将类文件通过createObjectURL创建为超链接地址作为href属性，文件名作为download属性，通过click实现a链接触发。

四、总结

教程结束。完整代码请克隆下面git仓库自行学习。本节代码我将再次优化，持续更新中
gitee.com/gomigo/miko…

uniapp实现文件下载器

一、实现效果

二、知识铺垫

三、代码实现

四、总结