Skip to content

Commit 717003a

Browse files
author
suqi
committed
first commit
0 parents  commit 717003a

File tree

14 files changed

+1519
-0
lines changed

14 files changed

+1519
-0
lines changed

‎.gitignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
node_modules

‎README.md‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
## 🚀 Features
2+
3+
- 🏳‍🌈 **Downloading size**: Monitor download size
4+
- ⚡ **Downloading downloadProgress**
5+
6+
## 🦄 Usage
7+
8+
```ts
9+
import { ref } from 'vue'
10+
import axios from 'axios'
11+
import AxDownLoader from 'axios-downloader'
12+
13+
// Options
14+
const AxDownLoaderOption = ref({
15+
url: 'https://images.unsplash.com/photo-1663529628961-80aa6ebcd157?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=764&q=80',
16+
fileName: 'test',
17+
fileSize: 0,
18+
downloadSize: 0,
19+
downloadProgress: 0,
20+
})
21+
22+
// downLoad
23+
const downLoad = function () {
24+
AxDownLoader(AxDownLoaderOption.value)
25+
.then((res) => {
26+
console.log('downLoad success', res)
27+
})
28+
.catch((err) => {
29+
console.log('downLoad faild', err)
30+
})
31+
}
32+
```
33+
34+
## 📦 Install
35+
36+
```bash
37+
npm i axios-downloader
38+
```

‎dist/index.cjs.js‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
'use strict';
2+
3+
var axios = require('axios');
4+
5+
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
6+
7+
var axios__default = /*#__PURE__*/_interopDefaultLegacy(axios);
8+
9+
function AxDownLoader(options) {
10+
return new Promise((resolve, reject) => {
11+
options.downloadProgress = 0;
12+
const CancelToken = axios__default["default"].CancelToken;
13+
axios__default["default"]({
14+
url: options.url,
15+
responseType: 'blob',
16+
headers: { 'Content-Type': 'application/json; charset=utf-8' },
17+
cancelToken: new CancelToken(function executor(c) {
18+
}),
19+
onDownloadProgress: function (progress) {
20+
const { loaded, total } = progress;
21+
options.fileSize = total;
22+
if (progress.lengthComputable) {
23+
options.downloadSize = loaded;
24+
options.downloadProgress = +((loaded / total) * 100.0).toFixed(1);
25+
}
26+
},
27+
})
28+
.then((res) => {
29+
let link = document.createElement('a');
30+
link.href = URL.createObjectURL(res.data);
31+
link.download = options.fileName;
32+
document.body.appendChild(link);
33+
link.click();
34+
URL.revokeObjectURL(link.href);
35+
resolve(res);
36+
})
37+
.catch((e) => {
38+
reject(e);
39+
});
40+
});
41+
}
42+
43+
module.exports = AxDownLoader;

‎dist/index.d.ts‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
/**
2+
* @url file download url
3+
* @fileName file name
4+
* @fileSize file size
5+
* @downloadSize download size
6+
* @downloadProgress download progress
7+
*/
8+
interface DefaultOptons {
9+
url: string | undefined;
10+
fileName: string;
11+
fileSize: number;
12+
downloadSize: number;
13+
downloadProgress: number;
14+
}
15+
16+
declare function AxDownLoader(options: DefaultOptons): Promise<unknown>;
17+
18+
export { AxDownLoader as default };

‎dist/index.esm.js‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
import axios from 'axios';
2+
3+
function AxDownLoader(options) {
4+
return new Promise((resolve, reject) => {
5+
options.downloadProgress = 0;
6+
const CancelToken = axios.CancelToken;
7+
axios({
8+
url: options.url,
9+
responseType: 'blob',
10+
headers: { 'Content-Type': 'application/json; charset=utf-8' },
11+
cancelToken: new CancelToken(function executor(c) {
12+
}),
13+
onDownloadProgress: function (progress) {
14+
const { loaded, total } = progress;
15+
options.fileSize = total;
16+
if (progress.lengthComputable) {
17+
options.downloadSize = loaded;
18+
options.downloadProgress = +((loaded / total) * 100.0).toFixed(1);
19+
}
20+
},
21+
})
22+
.then((res) => {
23+
let link = document.createElement('a');
24+
link.href = URL.createObjectURL(res.data);
25+
link.download = options.fileName;
26+
document.body.appendChild(link);
27+
link.click();
28+
URL.revokeObjectURL(link.href);
29+
resolve(res);
30+
})
31+
.catch((e) => {
32+
reject(e);
33+
});
34+
});
35+
}
36+
37+
export { AxDownLoader as default };

‎dist/index.js‎

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
(function (global, factory) {
2+
typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('axios')) :
3+
typeof define === 'function' && define.amd ? define(['axios'], factory) :
4+
(global = typeof globalThis !== 'undefined' ? globalThis : global || self, global.tracker = factory(global.axios));
5+
})(this, (function (axios) { 'use strict';
6+
7+
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
8+
9+
var axios__default = /*#__PURE__*/_interopDefaultLegacy(axios);
10+
11+
function AxDownLoader(options) {
12+
return new Promise((resolve, reject) => {
13+
options.downloadProgress = 0;
14+
const CancelToken = axios__default["default"].CancelToken;
15+
axios__default["default"]({
16+
url: options.url,
17+
responseType: 'blob',
18+
headers: { 'Content-Type': 'application/json; charset=utf-8' },
19+
cancelToken: new CancelToken(function executor(c) {
20+
}),
21+
onDownloadProgress: function (progress) {
22+
const { loaded, total } = progress;
23+
options.fileSize = total;
24+
if (progress.lengthComputable) {
25+
options.downloadSize = loaded;
26+
options.downloadProgress = +((loaded / total) * 100.0).toFixed(1);
27+
}
28+
},
29+
})
30+
.then((res) => {
31+
let link = document.createElement('a');
32+
link.href = URL.createObjectURL(res.data);
33+
link.download = options.fileName;
34+
document.body.appendChild(link);
35+
link.click();
36+
URL.revokeObjectURL(link.href);
37+
resolve(res);
38+
})
39+
.catch((e) => {
40+
reject(e);
41+
});
42+
});
43+
}
44+
45+
return AxDownLoader;
46+
47+
}));

‎index.html‎

Lines changed: 117 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,117 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>tset</title>
8+
<!-- import CSS -->
9+
<link
10+
rel="stylesheet"
11+
href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"
12+
/>
13+
<style>
14+
body {
15+
margin: 0;
16+
padding: 0;
17+
}
18+
.box {
19+
width: 100%;
20+
height: 100vh;
21+
background-image: linear-gradient(to right, #74ebd5 0%, #9face6 100%);
22+
display: flex;
23+
justify-content: space-around;
24+
align-items: center;
25+
}
26+
.borwser,
27+
.electron {
28+
width: 30%;
29+
height: 50%;
30+
/* background: white; */
31+
/* 背景半透明 */
32+
background: rgba(255, 255, 255, 1);
33+
border-radius: 10px;
34+
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
35+
display: flex;
36+
flex-direction: column;
37+
align-items: center;
38+
}
39+
.item-box {
40+
height: 80%;
41+
42+
display: flex;
43+
flex-direction: column;
44+
align-items: center;
45+
/* background: red; */
46+
width: 100%;
47+
justify-content: space-around;
48+
}
49+
/* From uiverse.io */
50+
button {
51+
padding: 1.3em 3em;
52+
font-size: 14px;
53+
text-transform: uppercase;
54+
letter-spacing: 2.5px;
55+
font-weight: 600;
56+
/* color: #000; */
57+
color: #fff;
58+
background-image: linear-gradient(to right, #92fe9d 0%, #00c9ff 100%);
59+
border: none;
60+
border-radius: 45px;
61+
box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.1);
62+
transition: all 0.3s ease 0s;
63+
cursor: pointer;
64+
outline: none;
65+
}
66+
67+
button:hover {
68+
background-color: #23c483;
69+
box-shadow: 0px 15px 20px rgba(46, 229, 157, 0.4);
70+
color: #fff;
71+
transform: translateY(-7px);
72+
}
73+
74+
button:active {
75+
transform: translateY(-1px);
76+
}
77+
h1 {
78+
/* 斜体 */
79+
font-style: italic;
80+
/* 加粗 */
81+
font-weight: bold;
82+
/* 大写 */
83+
text-transform: uppercase;
84+
}
85+
.input-box {
86+
position: absolute;
87+
top: 10%;
88+
left: 10%;
89+
}
90+
</style>
91+
</head>
92+
<body>
93+
<div id="app" class="box">
94+
<button @click="handleClick">下载</button>
95+
</div>
96+
</body>
97+
<!-- import Vue before Element -->
98+
<!-- <script src="https://unpkg.com/vue/dist/vue.js"></script> -->
99+
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.min.js"></script>
100+
<!-- import JavaScript -->
101+
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
102+
<script type="module" src="./dist/index.js"></script>
103+
<script>
104+
new Vue({
105+
el: '#app',
106+
data: function () {
107+
return {}
108+
},
109+
methods: {
110+
handleClick() {
111+
console.log('click')
112+
AxDownLoader()
113+
},
114+
},
115+
})
116+
</script>
117+
</html>

0 commit comments

Comments
 (0)