Chrome通过dataUrl下载文件时悬停下载项显示null问题咨询

我使用如下代码实现文件强制下载（避免浏览器自动在新标签页打开文件）：

const fetchFileAndConvertToDataURL = async (mediaUrl: string): Promise<string> => {
  const file = await downloadFileFromMediaGallery(mediaUrl) // API call returning an image stream
  const fileBlob = await file.blob()
    
  return new Promise((resolve, reject) => {
    const reader = new FileReader()
    reader.onloadend = () => resolve(reader.result as string)
    reader.onerror = reject
    reader.readAsDataURL(fileBlob)
  })
}

export const downloadFile = async (botId: BotId, mediaUrl: string, filename?: string) => {
  const dataUrl = await fetchFileAndConvertToDataURL(botId, mediaUrl)

  const a = document.createElement('a')
  a.href = dataUrl
  a.target = '_blank'
  a.download = filename || 'true'
  a.click()
}

上述代码功能运行正常，但在Chrome浏览器中下载完成后，将鼠标悬停在底部弹出的下载栏对应文件卡片上时，会显示“null”字样：

该位置默认用于展示文件的来源URL，由于我是通过dataUrl触发下载，出现“null”提示符合逻辑，我希望修改该位置的展示内容，请问是否可以自定义该区域的显示内容？

首先明确：你无法自定义Chrome下载栏悬停时展示的来源文本。这个区域是Chrome内置的安全提示UI，完全由浏览器控制，网页端没有开放任何API可以修改它的显示内容——毕竟这个设计的核心目的就是向用户明确告知文件的真实来源，防止钓鱼网站伪造来源欺骗用户，不可能允许前端随意篡改。

你现在看到null的原因很简单：data:类型的URL不存在对应的源站点信息，Chrome读取不到有效来源地址，就会 fallback 显示null。虽然不能自定义文本，但你可以通过调整下载实现方式，从根源避免出现null，让它正常显示你的站点域名：

• 放弃使用FileReader把文件转成data URL的方案，改用URL.createObjectURL()基于获取到的Blob生成临时对象URL触发下载。这种方案的源是当前站点，Chrome可以正常识别来源，不会显示null，同时性能远高于转base64的方案，大文件下载时内存占用低很多。
• 去掉不必要的a.target = '_blank'配置，带download属性的a标签不需要新开标签页就能触发下载，保留这个配置反而可能触发部分浏览器的弹窗拦截。

修改后的可直接用的代码如下：

const fetchFileBlob = async (mediaUrl: string): Promise<Blob> => {
  const file = await downloadFileFromMediaGallery(mediaUrl) // 接口返回文件流
  return file.blob()
}

export const downloadFile = async (botId: BotId, mediaUrl: string, filename?: string) => {
  const fileBlob = await fetchFileBlob(botId, mediaUrl)
  // 生成Blob临时对象URL
  const objectUrl = URL.createObjectURL(fileBlob)

  const a = document.createElement('a')
  a.href = objectUrl
  a.download = filename || 'download'
  // 兼容部分浏览器需要把a标签挂到DOM上才能触发点击
  document.body.appendChild(a)
  a.click()
  // 触发后移除节点、释放临时URL，避免内存泄漏
  document.body.removeChild(a)
  URL.revokeObjectURL(objectUrl)
}

改完之后再触发下载，悬停下载栏的文件卡片时，就会正常显示你当前站点的域名，不会再出现null。

如果你希望这个位置显示特定路径的地址，唯一的实现方式是让后端配置好Content-Disposition: attachment响应头，把文件放在你站点的对应路由下，用户点击直接请求该同域地址下载，此时该位置会显示对应文件的完整路由地址，但依然不支持自定义成任意非站点来源的文本。

内容的提问来源于stack exchange，提问作者Michal Kurz