能否在URL.createObjectURL中指定路径？生成带自定义文件名的Blob URL

API 探路者

2026-8-15

问题解答

直接生成localhost:8000/随机系统UUID/myDocument.pdf格式的Blob URL是做不到的——浏览器生成的Blob URL固定以blob:开头，格式为blob:<origin>/<uuid>，这是浏览器的安全机制决定的，用来明确区分本地Blob资源和服务器托管资源，无法自定义路径结构或后缀。

但可以通过Service Worker实现类似的URL效果，不需要在服务器创建实际文件，具体实现步骤如下：

实现思路

利用Service Worker拦截浏览器发起的特定路径请求，当请求匹配你想要的/随机UUID/myDocument.pdf格式时，直接返回本地的PDF Blob数据，模拟出服务器路径的效果。

代码实现

1. 主页面代码

// 注册Service Worker
async function registerSW() {
  if ('serviceWorker' in navigator) {
    await navigator.serviceWorker.register('/sw.js');
  }
}

// 准备PDF Blob数据
const blob = new Blob([data.body], { type: 'application/pdf' });
// 生成随机UUID作为文档标识
const docId = crypto.randomUUID();

// 将Blob存入Cache API，供Service Worker读取
async function storeBlob(docId, blob) {
  const cache = await caches.open('local-pdfs');
  await cache.put(`/${docId}/myDocument.pdf`, new Response(blob));
}

// 执行注册、存储并打开自定义URL
async function openCustomPdfUrl() {
  await registerSW();
  await storeBlob(docId, blob);
  window.open(`/${docId}/myDocument.pdf`, '_blank', 'noopener');
}

openCustomPdfUrl();

2. Service Worker文件（sw.js）

self.addEventListener('fetch', (event) => {
  // 匹配 /<UUID>/myDocument.pdf 格式的请求
  const targetPattern = /^\/[0-9a-f-]+\/myDocument\.pdf$/i;
  if (targetPattern.test(new URL(event.request.url).pathname)) {
    event.respondWith(
      caches.match(event.request).then(response => {
        return response || new Response('文档不存在', { status: 404 });
      })
    );
  }
});