跳转到内容
FastBlob 文档

集成示例

以下示例默认已完成快速开始接入,并安装了 JavaScript SDK

拉取为 Blob 后借助临时对象 URL 触发浏览器保存:

import fetch from '@fastblob/fastblob-fetch'
async function download(url, filename) {
const response = await fetch(url)
const blob = await response.blob()
const objectURL = URL.createObjectURL(blob)
const a = document.createElement('a')
a.href = objectURL
a.download = filename
a.click()
// 不要同步 revoke——部分浏览器此时尚未开始读取,会取消下载
setTimeout(() => URL.revokeObjectURL(objectURL), 60_000)
}
download('https://cdn.example.com/releases/app-1.2.0.dmg', 'app-1.2.0.dmg')

也可以完全不写代码:在 Response Headers 里 set 一条 Content-Disposition: attachment(见 Header 改写),普通链接就会直接弹下载框——但那是单节点直链,没有并行加速。

先用 HEAD 拿到总大小,再在 chunkCallback 里累计已接收字节:

import fetch from '@fastblob/fastblob-fetch'
async function downloadWithProgress(url, onProgress) {
const head = await fetch(url, { method: 'HEAD' })
const total = Number(head.headers.get('content-length'))
let received = 0
const response = await fetch(url, {
fastFetch: {
chunkCallback: (chunk) => {
received += chunk.size
onProgress(received / total)
}
}
})
return await response.blob()
}
const blob = await downloadWithProgress('https://cdn.example.com/models/llama-7b.gguf', (ratio) =>
console.log(`${Math.round(ratio * 100)}%`)
)

拉取完成后把 Blob 挂给 <video>

import fetch from '@fastblob/fastblob-fetch'
const response = await fetch('https://cdn.example.com/big-buck-bunny/video.mp4')
const blob = await response.blob()
const video = document.querySelector('video')
video.src = URL.createObjectURL(blob)

注意这是「先下完再播」。需要边下边播的场景,直接把任一子域的 URL 交给 <video src>(单节点,浏览器自己按 Range 流式拉取)。

任何一个 endpoint 子域都是普通的 HTTPS 直链,可以用在 <a><img>curl、包管理器等一切场景(单节点,无并行):

Terminal window
$ curl -LO https://0.cdn.example.com/releases/app-1.2.0.dmg

支持多源的下载工具可以直接吃满 10 个镜像。镜像规则:n 个镜像 = 在主机名前加 n.n 为 0–9),例如交给 aria2:

Terminal window
$ aria2c -x10 \
https://0.cdn.example.com/models/llama-7b.gguf \
https://1.cdn.example.com/models/llama-7b.gguf \
https://2.cdn.example.com/models/llama-7b.gguf

在 JS 里可用 getFastBlobInputs 生成完整列表。