Vue+vant实现离线下载
最近项目需求要实现下载功能，离线后也可以进行访问查看，于是做了一个关于离线下载的功能，在次，整理如下：
<template> <div> <div class="download_head_tabbar"> <div style="margin-bottom:15px"> <van-nav-bar title="下载" left-arrow @click-left="onClickLeft" /> </div> <div> <van-overlay :show="model_state" @click="show = false"> <div class="wrapper" @click.stop> <li><van-loading type="spinner" /> </li> <li style="color: white">加载中~~</li> </div> </van-overlay> </div> <div> <div v-if="fileObj.length <= 0 && downloading.length <= 0" class="enpty_box" > 暂无下载~~ </div> <div> <div v-show="downloading.length > 0"> <divv-for="(val, index) in downloading":key="index"class="down_item" ><!-- v-if="downloading_pross[`prossend${id}`] > 0" --><div class="down_item_left"> <li> <span>{{ val.name }}</span> </li> <!-- <li><span :style="{width:'30%'}"></span></li> --></div><div class="down_item_right"> <li> <span v-if="val.state == 0" class="downloading_icon" > 下载中 <span style="margin-top:3px"> <van-loading size="18px" /> </span> </span> <span v-else class="pross" @click="pause(val.downid)" >{{ downloading_pross[ `schedule${val.downid}` ] }}</span > <span @click="dele_downing(val.downid)"> <van-icon name="cross" /> </span> </li></div> </div> </div> <div class="downend_box"> <li v-for="(val, index) in fileObj" :key="index"><span class="downloadtitle" style="display:flex" @click="to_detail(val.id)"> <i class="icon iconfont iconbianzu"></i> {{ val.name }}</span><span @click="dele(val.id, index)">删除</span> </li> </div> </div> </div> </div> </div></template><script>import { Toast } from "vant";import { get } from "../../../api/api";export default { data() { return { dele_text: {}, profileID: 1, fileList: [ { name: "", size: "", modificationTime: "" } ], stateObj: {}, //下载进度 downObj: {}, //下载对象 fileObj: [], downloadimg_item: {}, downloading_pross: {}, downloading: [], isreset: false, pross_line: 0, loading_show: false, is_downloading: false, model_state: true }; }, methods: { onClickLeft() { this.$router.push({ path: "/Navigation" }); }, to_detail(id) { this.$router.push({ path: "/index", query: { profileId: id } }); }, pause(id) { var that = this; console.log("login pause"); if (that.downloading_pross[`schedule${id}`] == "继续") { that.downObj[`dtask${id}`].resume(); } else if (that.downloading_pross[`schedule${id}`] == "重试") { that.downloading.map((val, index) => { if (val.downid == id) { that.downloading.splice(index, 1); } }); that.isreset = true; that.downObj[`dtask${id}`].abort(); that.downFail(id); } else if (parseInt(that.downloading_pross[`schedule${id}`]) > 0) { that.downObj[`dtask${id}`].pause(); that.downloading_pross[`schedule${id}`] = "继续"; } }, dele_downing(id) { var that = this; plus.downloader.enumerate(e => { e.map(val => { if (JSON.parse(val.data).id == id) { val.abort(); } }); }, -1); this.$nextTick(() => { that.downloading.map((val, index) => { if (val.downid == id) { that.downloading.splice(index, 1); plus.storage.setItem("downing",JSON.stringify(that.downloading) ); } }); }); // that.downObj[fileName].start(); }, dele(id, index) { var that = this; console.log("进行删除"); var load; new Promise((resolve, reject) => { // that.loading_show = true; load = Toast.loading({ message: "删除中...", forbidClick: false }); setTimeout(() => { resolve(); }, 100); }).then(() => { plus.io.resolveLocalFileSystemURL( "_doc/profile/profile" + id, e => { console.log(e.name); e.removeRecursively(e => { console.log("删除profile" + id + "成功"); // that.checkFile(); that.fileObj.splice(index, 1); load.clear();},e => { console.log("删除profile" + id + "失败");} ); }, e => { console.log(`进行删除profile${id}失败`); console.log(e); } ); }); }, down1(num) { var that = this; that.downFail(num); }, downFail(id) { var that = this; that.$set(that.downloading_pross, "schedule" + id, "正在连接"); that.$set(that.downloading_pross, "prossend" + id, 0); that.$set(that.downloading_pross, "prossing" + id, 0); return new Promise((resolve, reject) => { that.$set(that.downloading_pross, "schedule" + id, "下载中"); console.log("进入下载..."); // that.is_downloading = true; that.downloadimg_item = {}; that.isreset = false; that.downloadimg_item.downid = id; that.downloadimg_item.name = this.$route.query.name || "下载名称"; that.downloadimg_item.state = 0; that.downloading.push(that.downloadimg_item); plus.storage.setItem( "downing", JSON.stringify(that.downloading) ); that.$set(that.downObj, "dtask" + id, 0); let URL = "需要访问下载的IP地址"; var url = process.env.NODE_ENV == "development" ? baseTestURL + "/mobile/offlineDownload/download" : baseProduceUrl + "/mobile/offlineDownload/download"; console.log(url); var options = { method: "POST", data: JSON.stringify({ id: id }), filename: `_doc/zips/zip${id}/zip${id}.zip`, retry: 0 }; var fileName = `dtask${id}`; that.downObj[fileName] = plus.downloader.createDownload( url, options, function(d, status) { console.log(d.state); // 下载完成 if (status == 200) {console.log("Download success: " + d.filename);console.log("下载完成");// that.downloadimg_item[`"schedule${id}"`] =// "解压中";resolve(id); } else {console.log("Download failed: " + status);reject(id); } } ); that.downObj[fileName].setRequestHeader( "Content-Type", "application/json" ); // 设置POST请求提交的数据类型为JSON字符串 that.downObj[fileName].setRequestHeader( "Authorization", "Bearer " + localStorage.getItem("token") ); that.downObj[fileName].addEventListener( "statechanged", (d, states) => { if (d.downloadedSize !== 0) {that.downloading_pross[`schedule${id}`] = "下载中...";// that.$set(that.downloading_pross, "schedule" + id, 123); } }, false ); that.downObj[fileName].start(); plus.storage.setItem("downObj", JSON.stringify(that.downObj)); }) .then(id => { return new Promise((resolve, reject) => { plus.io.resolveLocalFileSystemURL("_doc/profile/profile" + id,e => { console.log(e.name); console.log( plus.io.convertLocalFileSystemURL( "_doc/profile/profile" + id ) ); e.removeRecursively( e => { console.log( "删除profile" + id + "成功" ); resolve(id); }, e => { console.log( "删除profile" + id + "失败" ); resolve(id); } );},e => { console.log(`进行删除profile${id}失败`); console.log(e); resolve(id);} ); }); }) .then(id => { return new Promise((resolve, reject) => { console.log("进入解压...-----id-----" + id); plus.zip.decompress(`_doc/zips/zip${id}/zip${id}.zip`,`_doc/profile/profile${id}/`,e => { console.log("解压完成"); that.downloading_pross[`schedule${id}`] = "删除"; console.log(id); that.downloading.map((val, index) => { if (val.downid == id) { that.downloading.splice(index, 1); } }); plus.storage.setItem( "downing", JSON.stringify(that.downloading) ); that.checkFile(); resolve(id);},e => { console.log("解压失败"); reject(id);} ); }); }) .then(id => { that.downloadimg_item.state = 1; return new Promise((resolve, reject) => { plus.io.resolveLocalFileSystemURL(`_doc/zips/zip${id}`,e => { console.log(e.name, e.isFile); e.removeRecursively( e => { console.log("删除zip" + id + "成功"); }, e => { console.log("删除zip" + id + "失败"); } );},e => { console.log("zip" + id + "删除失败或者不存在");} ); }); }) .catch(id => { // that.is_downloading = false; console.log(`进入catch${id}`); that.downloadimg_item.state = 1; that.downloading_pross[`schedule${id}`] = "重试"; plus.io.resolveLocalFileSystemURL( `_doc/zips/zip${id}`, e => {e.removeRecursively(e => { console.log(`删除zip${id}成功`);}); }, e => {console.log(`zip${id}删除失败或者不存在`); } ); // that.dele(id); }); }, checkFile() { var that = this; that.model_state = true; that.fileObj = []; that.downloading = JSON.parse(plus.storage.getItem("downing")) || []; that.downObj = JSON.parse(plus.storage.getItem("downObj")) || []; plus.io.resolveLocalFileSystemURL("_doc/profile", fs => { var dirReader = fs.createReader(); dirReader.readEntries(e => { e.map(val => { console.log(val.name); var obj = {}; var fileReader = val.createReader(); fileReader.readEntries(e => { e.map(val => { console.log(val.name); if (val.isFile) { console.log("进入json成功"); val.file( e => { console.log("正在读取json"); var fileReader = new plus.io.FileReader(); fileReader.readAsText( e, "utf-8" ); //读取完毕 fileReader.onload = e => { console.log("读取json成功"); var result =e.target.result; var res = JSON.parse(result ); // obj.size = res.size; obj.id = res.id; obj.name = res.name; that.fileObj.push(obj); that.model_state = false; console.log(JSON.stringify( that.fileObj) ); }; }, e => { console.log("读取json文件失败"); } ); // } else { console.log("未检索到json文件"); } });},e => { console.log(val.name + "读取失败");} ); }); }); }); } }, filters: { getSize: function(value) { if (value < 1000000) { var num = (value / 1000).toFixed(2); var firstNum = num.split(".")[0]; var lastNum = num.split(".")[1]; if (lastNum > 10 && lastNum % 10 == 0) { // if (lastNum % 10 == 0 && lastNum / 10 !== 0) { //50 return firstNum + "." + lastNum[0]; } else if (lastNum == 0) { //00 return firstNum + "MB"; } else { return num + "MB"; } } else { var num = (value / 1000000).toFixed(2); var firstNum = num.split(".")[0]; var lastNum = num.split(".")[1]; if (lastNum > 10 && lastNum % 10 == 0) { // if (lastNum % 10 == 0 && lastNum / 10 !== 0) { //50 return firstNum + "." + lastNum[0] + "GB"; } else if (lastNum == 0) { //00 return firstNum + "GB"; } else { return num + "GB"; } } } }, mounted() { var that = this; // console.log(this.$route.query); // console.log(localStorage.getItem("token")); if (this.$route.query.id) { console.log(this.$route.query.id); that.profileID = this.$route.query.id; that.downFail(this.$route.query.id); } else { console.log("进入检查"); that.checkFile(); } }};</script><style lang="less" scoped>li { list-style: none;}.wrapper { display: flex; align-items: center; justify-content: center; height: 100%;}.pross { text-align: center;}.download_body { display: flex; justify-content: space-between;}.enpty_box { text-align: center;}.down_item { background-color: rgb(243, 243, 243); display: flex; justify-content: space-between; margin: 10px 0; padding: 5px 20px; .down_item_left { width: 50vw; display: flex; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; word-break: break-all; li { display: flex; font-size: 16px; i { color: green; } } } .down_item_right { display: flex; align-items: center; justify-content: center; li { display: flex; .downloading_icon { display: flex; margin-right: 15px; } span:last-child { margin-left: 5px; } } }}.downend_box { li { margin: 10px 0; background-color: rgb(243, 243, 243); padding: 5px 20px; display: flex; justify-content: space-between; span { margin: 3px 0; } span:first-child { width: 50vw; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; word-break: break-all; display: flex; font-size: 16px; line-height: 30px; i { margin-right: 3px; color: aqua; } } span:last-child { display: flex; color: rgb(164, 190, 166); font-size: 13px; align-items: center; } }}.wrapper { display: flex; flex-direction: column; li:last-child { padding-top: 20px; }}</style><style lang="less">.download_head_tabbar { .van-nav-bar .van-icon { color: #000; }}</style>
