更新记录

1.0.0(2023-04-21)

1.uni-app移动端-H5-小程序下载保存图片,文档和视频到手机,带进度条


平台兼容性

Vue2 Vue3
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>

隐私、权限声明

1. 本插件需要申请的系统权限列表:

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

许可协议

MIT协议

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问