更新记录

1.0.0（2023-04-21） 下载此版本

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

平台兼容性

uni-app

其他

ss-download

下载保存图片，文档，视频到手机，兼容H5端，微信小程序端，APP端， 带进度条

不清楚使用方式可点击右侧导入示例项目运行完整示例

使用说明

基本用法

下载文件页面示例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>