h5 uniapp实现文件流，链接的下载，或者打包成压缩文件

需要下载以下几个包
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保存文件  自定义文件名})})
}

h5 uniapp实现文件流，链接的下载，或者打包成压缩文件相关推荐

Android中将指定文件夹打包成压缩文件
Android中将指定文件夹打包成压缩文件因为业务功能的需要,所以今天在网上找了一下安卓中生成压缩文件的代码,搜到的不同文章基本都是用的同一段代码,当我使用这段代码时候发现,它在生成压缩文件的时候并 ...
SpringBoot中将图片和Excel表格打包成压缩文件供前端下载
一.需求: 今天碰到了一个需求,就是将COS对象存储的图片和后端的数据库查询出来的用户的信息的excel表格一起打包成一个压缩包提供给前端下载. 二.分析: 作者的思路是这样的: 从COS的存储地址拿 ...
react——利用jszip实现文件批量下载并打包成zip文件
本文章主要记录利用jszip实现文件批量下载图片,文档.mp3,视频(MP4)等文件,一般而言前端实现下载功能一般都是通过a链,这在下载单个文件的场景很实用,但如果是批量下载很多个文件,同样也可以用a ...
npm打包打包顺带打包成压缩文件
在packjson 中引入 "filemanager-webpack-plugin": "2.0.5", 修改 webpack.base.conf.js 文件 ...
java浏览器预览文件_JAVA读取文件流,设置浏览器下载或直接预览操作
最近项目需要在浏览器中通过URL预览图片.但发现浏览器始终默认下载,而不是预览.研究了一下,发现了问题: // 设置response的Header,注意这句,如果开启,默认浏览器会进行下载操作,如果注 ...
java 看书浏览器官_JAVA读取文件流,设置浏览器下载或直接预览操作
最近项目需要在浏览器中通过url预览图片.但发现浏览器始终默认下载,而不是预览.研究了一下,发现了问题: // 设置response的header,注意这句,如果开启,默认浏览器会进行下载操作,如果注 ...
java 读取浏览器_JAVA读取文件流,设置浏览器下载或直接预览操作
最近项目需要在浏览器中通过URL预览图片.但发现浏览器始终默认下载,而不是预览.研究了一下,发现了问题: // 设置response的Header,注意这句,如果开启,默认浏览器会进行下载操作,如果注 ...
java用浏览器下载文件_JAVA读取文件流,设置浏览器下载或直接预览操作
最近项目需要在浏览器中通过url预览图片.但发现浏览器始终默认下载,而不是预览.研究了一下,发现了问题: // 设置response的header,注意这句,如果开启,默认浏览器会进行下载操作,如果注 ...
JAVA 实现返回PDF文件流并进行下载
JAVA 实现返回PDF文件流并进行下载首先确保本地存放pdf 保证通过路径可以拿到文件我这边把pdf放在e盘下的目录 1.前台方法原生ajax 发送请求返回文件流进行下载 function d ...

h5 uniapp实现文件流，链接的下载，或者打包成压缩文件

h5 uniapp实现文件流，链接的下载，或者打包成压缩文件相关推荐

最新文章

热门文章