Blob URL的浏览器

Blob URL是一种特殊的URL，用于在浏览器中动态生成和显示数据，而不需要将数据存储在服务器上。浏览器支持Blob URL，可以使用JavaScript将数据转换为Blob对象，然后使用URL.createObjectURL()方法生成Blob URL，最后将Blob URL分配给页面元素的src或href属性。这样，浏览器就可以显示或下载Blob数据了。常见的应用场景包括图片、音频、视频等多媒体文件的在线播放或下载。

相关问题

let blobUrl = window.URL.createObjectURL(blob)

根据提供的引用内容中的代码片段，let blobUrl = window.URL.createObjectURL(blob)的作用是创建一个URL对象，该对象指向一个Blob对象的URL。这个URL可以用于在浏览器中显示或下载Blob对象的内容。在这里，Blob对象可以是从服务器返回的文件数据或通过其他方式创建的文件数据。

中的代码片段使用了这个方法来生成对服务器响应的Blob数据的URL，以便在浏览器中下载或显示该数据。而和中的代码片段也分别使用了类似的方式创建了Blob对象的URL，用于在浏览器中下载或显示文件数据。

总结起来，let blobUrl = window.URL.createObjectURL(blob)的作用是创建一个URL对象，用于在浏览器中下载或显示Blob对象的内容。

export function convertRes2Blob(response,exportFileName) { // try { const fileName = response.headers['content-disposition']?.match(/filename=(.*)/)[1] ?? exportFileName // 将二进制流转为blob const blob = new Blob([response.data], { type: 'application/octet-stream' }) if (typeof window.navigator.msSaveBlob !== 'undefined') { // 兼容IE，window.navigator.msSaveBlob：以本地方式保存文件 window.navigator.msSaveBlob(blob, decodeURI(fileName)) } else { // 创建新的URL并指向File对象或者Blob对象的地址 const blobURL = window.URL.createObjectURL(blob) // 创建a标签，用于跳转至下载链接 const tempLink = document.createElement('a') tempLink.style.display = 'none' tempLink.href = blobURL tempLink.setAttribute('download', decodeURI(fileName)) // 兼容：某些浏览器不支持HTML5的download属性 if (typeof tempLink.download === 'undefined') { tempLink.setAttribute('target', '_blank') } // 挂载a标签 document.body.appendChild(tempLink) tempLink.click() document.body.removeChild(tempLink) // 释放blob URL地址 window.URL.revokeObjectURL(blobURL) } message.success("已导出"); // } // catch (error) { // message.warning("导出异常，请重新尝试"); // } } 导出报Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'content-disposition'是因为什么原因

这个错误通常是因为响应头中不存在 "content-disposition" 属性。在你的代码中，你尝试使用 response.headers['content-disposition'] 获取文件名，然而如果响应头中没有这个属性，则会返回 undefined，导致你在尝试使用 undefined.match(/filename=(.*)/)[1] 访问一个不存在的属性，从而导致这个错误。

为了避免这个问题，你可以在读取 response.headers['content-disposition'] 之前先检查一下这个属性是否存在，例如：

const fileName = (response.headers['content-disposition'] && response.headers['content-disposition'].match(/filename=(.*)/)[1]) || exportFileName;

这样，如果响应头中不存在 "content-disposition" 属性，fileName 将会默认使用传入的 exportFileName。