h5 uniapp实现文件流,链接的下载,或者打包成压缩文件
uniapp h5实现文件流,链接,打包成压缩包
·
需要下载以下几个包
axios
npm i axios --save
JSZip(压缩)
npm install jszip --save
file-saver(导出文件)
npm install file-saver --save
直接写代码了,都有解释,欢迎留言讨论
import axios from 'axios'
import JSZip from 'jszip'
import FileSaver from 'file-saver'
// 当下载的文件为文件流时,使用在h5小程序中,不使用uni接口
export function downFile(value) {
// 需要接收流文件的接口
// 这里的value是一个对象,主要包括url,params,和其他需要传递给后台的参数
axios({
...value,
method: 'get',
responseType: 'blob',
}).then((res) => {
const fileUrl = new Blob([res.data]) // 将返回的数据流手动构建成blob流
const reader = new FileReader()
reader.readAsDataURL(fileUrl) //转换为64位,可以直接放入a标签
reader.onload = (e) => {
const a = document.createElement('a')
if (typeof e.target.result === 'string') {
a.download = 'test' + '.pdf' // 这里以接收pdf文件为例
a.href = e.target.result
}
a.click()
document.body.removeChild(a)
}
})
}
// 下载文件压缩包
export function downZip(value) {
const zip = new JSZip() //创建一个压缩文件
// 这里的value是一个对象,主要包括url,params,和其他需要传递给后台的参数
axios({
...value,
method: 'get',
responseType: 'blob',
})
.then((res) => {
zip.file('test.pdf', res.data, { binary: true }) // 将文件打包到文件夹中,如果此处有多个文件,可以使用for循环将文件都加载在文件夹中,这里以pdf文件为例
})
.then(() => {
zip.generateAsync({ type: 'blob' }).then((content) => {
//打包到文件中压缩
FileSaver.saveAs(content, '签到表.zip') // 利用file-saver保存文件 自定义文件名
})
})
}
更多推荐
已为社区贡献2条内容
所有评论(0)