|
15 | 15 | <img src="https://img.shields.io/badge/issues-问题反馈-yellow?style=for-the-badge&logo=github" alt="问题反馈" /> |
16 | 16 | </a> |
17 | 17 |
|
18 | | -## 📖 使用方式 |
19 | | - |
20 | | -### ✍ 添加元数据 |
21 | | - |
22 | | -```typescript |
23 | | -// @require https://**/zip-downloader.js?* |
24 | | -// @grant GM_download |
25 | | -``` |
26 | | - |
27 | | -### 📥 参数说明 |
| 18 | +## 📥 参数说明 |
28 | 19 |
|
29 | 20 | **Options 参数说明:** |
30 | 21 |
|
|
43 | 34 | | `url` | string | 否 | | URL 类型资源 | |
44 | 35 | | `blob` | Blob | 否 | | Blob 类型资源 | |
45 | 36 |
|
46 | | -### 📦 使用示例 |
| 37 | +## 📦 使用示例 |
47 | 38 |
|
48 | 39 | **下载,压缩,并保存到本地** |
49 | 40 |
|
@@ -84,6 +75,93 @@ const blob = await zipDownloader({ |
84 | 75 | // GM_download(URL.createObjectURL(blob), 'index.zip') |
85 | 76 | ``` |
86 | 77 |
|
| 78 | +## 📖 使用方式 |
| 79 | + |
| 80 | +### 方式一:直接引入库文件 |
| 81 | + |
| 82 | +```typescript |
| 83 | +// ==UserScript== |
| 84 | +// @require https://**/zip-downloader.js?* |
| 85 | +// @grant GM_download |
| 86 | +// ==/UserScript== |
| 87 | + |
| 88 | +(async function () { |
| 89 | + 'use strict' |
| 90 | + await zipDownloader({ |
| 91 | + filename: 'index.zip', |
| 92 | + resources: [ |
| 93 | + { name: 'index.html', url: location.href }, |
| 94 | + { |
| 95 | + name: 'hello.txt', |
| 96 | + blob: new Blob(['hello world'], { type: 'text/plain' }), |
| 97 | + }, |
| 98 | + ], |
| 99 | + concurrency: 10, |
| 100 | + async onProgress(index) { |
| 101 | + console.log(`正在下载第 ${index + 1} 个资源`) |
| 102 | + }, |
| 103 | + }) |
| 104 | +})() |
| 105 | +``` |
| 106 | + |
| 107 | +### 方式二:vite + vite-plugin-monkey [推荐] |
| 108 | + |
| 109 | +1. 初始化项目 |
| 110 | + |
| 111 | +```shell |
| 112 | +npm create monkey |
| 113 | +``` |
| 114 | + |
| 115 | +2. 安装 zip-downloader 依赖 |
| 116 | + |
| 117 | +```shell |
| 118 | +npm i @xiaohuohumax/zip-downloader |
| 119 | +``` |
| 120 | + |
| 121 | +3. 在 main.ts 中使用 zip-downloader |
| 122 | + |
| 123 | +```typescript |
| 124 | +import zipDownloader from '@xiaohuohumax/zip-downloader' |
| 125 | + |
| 126 | +await zipDownloader({ |
| 127 | + filename: 'index.zip', |
| 128 | + resources: [ |
| 129 | + { name: 'index.html', url: location.href }, |
| 130 | + { |
| 131 | + name: 'hello.txt', |
| 132 | + blob: new Blob(['hello world'], { type: 'text/plain' }), |
| 133 | + }, |
| 134 | + ], |
| 135 | + concurrency: 10, |
| 136 | + async onProgress(index) { |
| 137 | + console.log(`正在下载第 ${index + 1} 个资源`) |
| 138 | + }, |
| 139 | +}) |
| 140 | +``` |
| 141 | + |
| 142 | +1. 修改 vite.config.ts 排除 zip-downloader 依赖和添加 GM_download 权限 |
| 143 | + |
| 144 | +```typescript |
| 145 | +import { defineConfig } from 'vite' |
| 146 | +import monkey, { cdn } from 'vite-plugin-monkey' |
| 147 | + |
| 148 | +// https://vitejs.dev/config/ |
| 149 | +export default defineConfig({ |
| 150 | + plugins: [ |
| 151 | + monkey({ |
| 152 | + build: { |
| 153 | + externalGlobals: { |
| 154 | + '@xiaohuohumax/zip-downloader': cdn.jsdelivr('zipDownloader', 'dist/index.lib.js'), |
| 155 | + }, |
| 156 | + }, |
| 157 | + userscript: { |
| 158 | + grant: ['GM_download'] |
| 159 | + }, |
| 160 | + }), |
| 161 | + ], |
| 162 | +}) |
| 163 | +``` |
| 164 | + |
87 | 165 | ## 🧩 依赖项目 |
88 | 166 |
|
89 | 167 | - [zip.js](https://github.com/gildas-lormeau/zip.js) Zip 压缩库 |
|
0 commit comments