更新记录
1.0.0(2023-04-21)
下载此版本
1.uni-app移动端-H5-小程序下载保存图片,文档和视频到手机,带进度条
平台兼容性
App |
快应用 |
微信小程序 |
支付宝小程序 |
百度小程序 |
字节小程序 |
QQ小程序 |
app-vue app-nvue |
× |
√ |
× |
× |
× |
× |
钉钉小程序 |
快手小程序 |
飞书小程序 |
京东小程序 |
× |
× |
× |
× |
H5-Safari |
Android Browser |
微信浏览器(Android) |
QQ浏览器(Android) |
Chrome |
IE |
Edge |
Firefox |
PC-Safari |
√ |
√ |
√ |
√ |
√ |
√ |
× |
× |
× |
ss-download
下载保存图片,文档,视频到手机,兼容H5端,微信小程序端,APP端, 带进度条
不清楚使用方式可点击右侧导入示例项目运行完整示例
使用说明
属性 |
是否必填 |
值类型 |
默认值 |
说明 |
fileUrl |
是 |
String |
空 |
下载单个文档或视频传递url |
fileType |
是 |
String |
空 |
类型(1.下载图片,2.下载文件,3.下载视频) |
基本用法
下载文件页面示例index.vue
<template>
<view>
<view class="box">
<view style="margin-bottom:32rpx;">uni-app下载文件</view>
<view v-for="(item,index) in fileList" :key="index">
<view style="word-break: break-all;">{{item.src}}</view>
<button class="previewBtn" @click="toDownload(item)">{{item.name}}</button>
</view>
</view>
<ss-download ref="ssdownload" :fileUrl="fileUrl" :fileType="fileType"></ss-download>
</view>
</template>
<script>
export default {
data() {
return {
fileList: [{
type: '1',
name: '下载图片',
src: 'https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/efd8e280-60a9-11eb-a16f-5b3e54966275.jpg'
},
{
type: '2',
name: '下载文档',
src: 'http://storage.xuetangx.com/public_assets/xuetangx/PDF/PlayerAPI_v1.0.6.pdf'
},
{
type: '3',
name: '下载视频',
src: 'https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/a876efc0-4f35-11eb-97b7-0dc4655d6e68.mp4',
},
],
fileUrl:'',
fileType:''
}
},
onLoad() {
},
methods: {
toDownload(item){
this.fileUrl = item.src;
this.fileType = item.type;
}
}
}
</script>
<style lang="scss" scoped>
.box {
padding: 20rpx 40rpx;
.previewBtn {
height:60rpx;
width:200rpx;
border-radius:16rpx;
background-color:#409eff;
color:#fff;
line-height:60rpx;
margin:24rpx 12rpx;
}
}
</style>