如何修改URL.createObjectURL(file)生成的Blob URL中的标识名称？

Hey there! Let's clear this up right away: you can't directly modify the UUID-like string in the Blob URL generated by URL.createObjectURL(). That identifier is a browser-internal unique key that maps to your Blob/File object, and browsers don't expose any API to customize it. The filename you set on your File object (name.pdf) is a separate property that doesn't affect the Blob URL's structure.

Why Your Current Code Doesn't Change the URL #

When you run this:

const file = new File([blob],"name.pdf", { type:"application/pdf" });
const url = window.URL.createObjectURL(file);

The name.pdf is stored as the file.name property, but the Blob URL's identifier (c4ba621c-d314-42b4-9a8f-a4e87161f4d0 in your example) is generated by the browser to uniquely track the underlying Blob data. There's no way to overwrite this part of the URL.

Workarounds to Get the "Custom Name" Experience #

Even though you can't change the Blob URL itself, you can make users see your custom name in relevant scenarios:

1. For File Downloads: Use the download Attribute

If your goal is to let users download the file with your custom name, use an <a> tag with the download attribute. This bypasses the need for the Blob URL to show the name directly:

const file = new File([blob],"name.pdf", { type:"application/pdf" });
const url = window.URL.createObjectURL(file);

// Create a hidden anchor tag to trigger download
const downloadLink = document.createElement('a');
downloadLink.href = url;
downloadLink.download = file.name; // This sets the downloaded filename
document.body.appendChild(downloadLink);
downloadLink.click();
document.body.removeChild(downloadLink);

// Don't forget to clean up the Blob URL to avoid memory leaks
window.URL.revokeObjectURL(url);

2. For In-Browser Previews: Wrap the PDF in a Custom HTML Page

If you're opening the PDF in a new window and want the tab to show your custom name, create a simple HTML page that embeds the PDF and sets a custom title. This way, the tab title will be your filename instead of the UUID:

const file = new File([blob],"name.pdf", { type:"application/pdf" });
const pdfUrl = window.URL.createObjectURL(file);

// Build an HTML page that displays the PDF and has your custom title
const previewHtml = `
<!DOCTYPE html>
<html>
<head>
    <title>${file.name}</title>
    <style>
        body { margin: 0; padding: 0; }
        embed { width: 100vw; height: 100vh; border: none; }
    </style>
</head>
<body>
    <embed src="${pdfUrl}" type="application/pdf">
</body>
</html>
`;

// Create a Blob for the HTML page and generate its URL
const htmlBlob = new Blob([previewHtml], { type: 'text/html' });
const previewUrl = window.URL.createObjectURL(htmlBlob);

// Open the custom preview page in a new tab
window.open(previewUrl, "_blank");

// Clean up the URLs after a short delay (to ensure the page loads)
setTimeout(() => {
    window.URL.revokeObjectURL(pdfUrl);
    window.URL.revokeObjectURL(previewUrl);
}, 1500);

Key Takeaway #

While you can't alter the Blob URL's internal identifier, these workarounds let you deliver the user experience you want—whether that's a recognizable download filename or a preview tab with your custom title.

内容的提问来源于stack exchange，提问作者Bautista D'Alessandro