后台返回文件流

1.因为是文件流下载，所以在取后台数据的时候，要多传递一个【responseType: ‘blob’】这个参数，是为了最后数据返回时response的data为【blob】文件格式（data: Blob {size: 22528, type: “application/vnd.ms-excel”}），否则返回的数据只有文件流的结构体，不包含【blob】。
下面为封装的获取后台文件流的方式

function downloadPost (config){
  return new Promise((resolve,reject) => {
    axios({
        url: config.url,
        method: 'post',
        data: config.data,
        responseType: 'blob'
    }).then(res => {
      resolve(res)
    }).catch(err=>{
      reject(err);
    });
  });
}

2.将取回来的response直接返回到应用页，通过取到的response去实现文件流转换的制作。我是封装了一个方法，方便多处调用。如果不封装方法的话，直接将实现方法写在返回结果的地方就可以了
下面是调用后台方法的写法

downloadTemplate({responseType: 'arraybuffer'}).then(res=>{
    // 文件流转换成xls文件
    this.$utils.fileConversion("白名单导入模板.xls",res);
    this.$message({type:'success',message:'模板文件已开始下载!'});
})

下面是上面返回结果调用的【fileConversion】的写法

   /**
	 * 字节流转换成文件下载
	 * inputFileName：文件名
	 * data：后台取得数据
	 */
	fileConversion(inputFileName,data){
		let str = data.headers['content-disposition'];
		// 文件名
		let fileName = inputFileName;
		let blob = new Blob([data.data], {
			type:
			"application/vnd.ms-excel,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
		});
		if (window.navigator.msSaveOrOpenBlob) {
			navigator.msSaveBlob(blob);
		} else {
			let elink = document.createElement("a");
			elink.download = fileName;
			elink.style.display = "none";
			elink.href = URL.createObjectURL(blob);
			document.body.appendChild(elink);
			elink.click();
			document.body.removeChild(elink);
		}
	},

以上方法就可以实现后台返回文件流的文档转换了。
需要注意的是，我是通过修改传递的文件名用来控制导出的格式，大家可以参考我的方法实现，如果有更好的方法欢迎评论~~
下面配送控制方式：

if(exportType == 1) {
    fileName = "白名单导出数据.xls"
} else {
    fileName = "白名单导出数据.csv"
}

通过URL下载文件的话，其实后台请求封装与文件流是一样的，封装的话和文件流也是一样的，传递取回来的response和文件名，我就不一一粘代码了，可以参考上面的方式。（在这里小小备注一下：因为我没有亲测url的方式，所以可能会存在小问题，大家如果试了有什么问题，欢迎评论，我会慢慢修改的~~）
奉上封装方法：

/**
	 * 从URL里下载文件
	 * fileName:文件名
	 * data:后台取得的数据
	*/
	// 下载文件
	downloadFile (fileName,data) {
		if (!data) { return }
		let url = window.URL.createObjectURL(new Blob([data]))
		let link = document.createElement('a')
		link.style.display = 'none'
		link.href = url;
		link.setAttribute('download', fileName)
		document.body.appendChild(link)
		link.click()
	},

感谢阅读~~

背景：某次需求有文件下载功能，查阅文档使用wx.saveFile下载之后使用者找不到路径，再查阅文档采取曲线解决问题，得wx.openDocument，然打开仍无法保存，关闭找不到，再查得，需要手动设置可分享，这样右上角就可出现分享功能，曲线解决了需求，资料和code记录如下：

wx.downloadFile({
        url: 'https://*******',//文件路径
        success: function (res) {
          const filePath = res.tempFilePath
          wx.openDocument({
            filePath: filePath,
            showMenu: true,
            success: function (res) {
              console.log('打开文档成功')
            }
          })
        }
      })

过程中涉及的API记录如下：

1.wx.saveFile(Object object)

保存文件到本地。注意：saveFile 会把临时文件移动，因此调用成功后传入的 tempFilePath 将不可用

官方文档：wx.saveFile(Object object) | 微信开放文档微信开发者平台文档https://developers.weixin.qq.com/miniprogram/dev/api/file/wx.saveFile.html问题：保存成功之后找不到本地文件

2. wx.openDocument(Object object)

新开页面打开文档。微信客户端 7.0.12 版本前默认显示右上角菜单按钮，之后的版本默认不显示，需主动传入 showMenu。

官方文档： wx.openDocument(Object object) | 微信开放文档微信开发者平台文档https://developers.weixin.qq.com/miniprogram/dev/api/file/wx.openDocument.html

注：filePath为临时路径，需要通过downLoadFile获得，下面介绍wx.downloadFile(Object object)

3.wx.downloadFile(Object object)

下载文件资源到本地。客户端直接发起一个 HTTPS GET 请求，返回文件的本地临时路径 (本地路径)，单次下载允许的最大文件为 200MB。使用前请注意阅读相关说明。

注意：请在服务端响应的 header 中指定合理的 Content-Type 字段，以保证客户端正确处理文件类型。

官方文档：DownloadTask | 微信开放文档微信开发者平台文档https://developers.weixin.qq.com/miniprogram/dev/api/network/download/wx.downloadFile.html 

 根据以上API,采用文章开始给出的code可以实现文件下载并能随时找到文件的需求。撒花，完结。

ps:多多点赞，多多关注，有事评论区聊起来。

1.微信小程序文件下载

wx.downloadFile({
    url:'https://www.baidu.com/test', //(仅为示例接口，注：这里的域名需要到小程序公众平台添加)
    filePath:'', //指定下载的目录(可不传，一般使用wx.env.USER_DATA_PATH下载到微信的缓存目录里)
    success(res){
        if(res.statusCode == 200){
            //下载成功后的操作
        }
    }
})

2.微信小程序文件系统

const fs = wx.getFileSystemManager(); //拿到小程序整个文件系统

//下载保存的路径首先检测是否存在，如存在，则直接下载，不存在则创建

//检测文件路径
let judgeThisFilePath = (path) => {
    fs.access({
        path,
        success(res){
            //已存在
        },
        fail(err){
            //不存在
        }
    })
};

//创建文件
let establishFilePath = (path) => {
    fs.mkdir({
        dirPath:path, //需要创建的路径
        recursive：true, //是否需要按照层级目录依次创建，如为false则是不按照
        success(res){
            //创建成功后的操作
        },
        fail(err){
            //创建失败的操作
        }
    })
};

3.下载的文件如果为Zip压缩包,则需要解压

注：如果压缩包为软件直接压缩的，且里面带有中文命名的建议后台接收后解压再压缩，否则中文命名的文件会出现乱码的格式，目前微信官方也不解决

//文件解压
let fileUnzip = (oldPath,newPath) => {
    fs.unzip({
        zipFilePath:oldPath,//源文件路径
        targetPath:newPath,//解压后文件所在路径
        success(res){
            //解压成功后操作
        },
        fail(err){
            //解压失败后操作
        }
    })
}


//文件解压后可以打开所在文件夹查看目录
let lookFileList = (path) => {
    fs.readdir({
        dirPath:path, //注：这里的路径是你想查看的文件目录路径
        success(res){
            //成功之后的操作
        },
        fail(err){
            //失败的操作
        }
    })
};

4.在线打开文档，当前支持的类型为：doc、docx、xls、xlsx、ppt、pptx、pdf

//在线打开文档
wx.openDocument({
    filePath: '',//文档所在路径
    success(res) {
        //成功打开的操作
    },
    fail(err) {
        //打开失败的操作
    }
})

5.视频、图片在线打开方式（注：小程序基础库版本不低于 2.15.0）

微信官方文档

wx.previewMedia({
    sources:[{
        url:'', //图片或者视频所在路径
        type:'', //图片为image，视频为video
    }], //多张的话可以往数组里面加
    success(res){
        //预览成功
    },
    fail(err){
        //预览失败
    }
})