解决 Failed to execute ‘createObjectURL‘ on ‘URL‘ Overload resolution failed

vue使用二进制流下载文件,使用:

 link.href = window.URL.createObjectURL(blob);

报错:
Failed to execute ‘createObjectURL’ on ‘URL’: Overload resolution failed.

主要是因为 Chrome 更新后不支持这种用法(其他主流浏览器也不支持),需要改为:

// 增加type 配置,设置下载资源的类型
 link.href = window.URL.createObjectURL(new Blob([blob],{type: 'application/zip'}));

完整代码
Vue 二进制流下载文件参考代码

/**
 * 下载文件,需要为二进制文件流
 * @param {*} blob 文件流
 * @param {*} fileName 文件名称
 * @param {*} suffix 后缀
 * @param {*} type blob类型
 */
fileUtil.downloadFile = (blob, fileName = '', suffix = '.xlsx', type) => {
  fileName += suffix
  // 该方法支持的浏览器不多(IE10支持),但效率更好
  if (window.navigator.msSaveOrOpenBlob) {
    navigator.msSaveOrOpenBlob(blob, fileName)
  } else {
    const link = document.createElement('a')
    // link.href = window.URL.createObjectURL(blob) 主流浏览器已不支持此种方式,通过下面代码处理
    link.href = window.URL.createObjectURL(new Blob([blob]{type}))
    link.download = fileName
    link.click()
    window.URL.revokeObjectURL(link.href)
  }
}
  • 6
    点赞
  • 14
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 4
    评论
### 回答1: "failed to execute 'createobjecturl' on 'url': overload resolution failed" 的意思是在执行 'createobjecturl' 函数时出现了重载解析失败的错误。这通常是由于传递给函数的参数不正确或不兼容所导致的。需要检查参数是否正确,并确保它们符合函数的要求。 ### 回答2: "failed to execute 'createobjecturl' on 'url': overload resolution failed" 是一个 JavaScript 错误。在使用 createObjectURL() 方法时,如果参数类型不正确或参数数量不符合要求,就会出现这个错误。 createObjectURL() 是一个用于创建 URL 对象的方法,它接受一个参数。这个参数可以是 Blob、File 或 MediaSource 对象,用于创建一个 URL 对象,以便在页面上播放视频或显示图片等内容。 当这个方法的参数不符合要求时,就会出现 "overload resolution failed" 的错误。这个错误表示使用的 createObjectURL() 方法的版本不支持调用当前提供的参数或参数组合。 可能出现这个错误的原因也很简单。可能错误的情况有: 1. 参数类型不正确 如果传入的参数不是 Blob、File 或 MediaSource 对象,就会导致这个方法无法执行,从而报错。因此,应该先检查传入的参数类型是否正确。 2. 参数数量不符合要求 如果传入的参数数量不符合要求,比如 createObjectURL() 方法只能接受一个参数,如果传入了两个参数,就会导致这个方法无法执行,从而报错。 综上所述,当出现 "failed to execute 'createobjecturl' on 'url': overload resolution failed" 错误的时候,应该先检查传入的参数类型是否正确,再检查传入的参数数量是否符合要求。如果这些方面都没有问题,可以考虑使用另外一个方法来达到相同的目的,比如 URL.createObjectURL() 方法。 ### 回答3: 当我们在浏览器开发过程中使用了 “createobjecturl” 方法时,有时会出现 “failed to execute 'createobjecturl' on 'url': overload resolution failed" 的错误提示。 这个错误提示实际上是因为我们使用 “createobjecturl” 方法时,传递的参数类型不匹配导致的。 在JavaScript 中,“createobjecturl” 方法主要用于创建表示指定 Blob 对象或者 File 对象的 URL。 通常情况下,我们的代码实现是如下所示: ```javascript var file = document.getElementById ('file').files [0]; var url = window.URL.createObjectURL (file); ``` 在这个代码示例中,我们尝试使用 “createobjecturl” 方法,创建一个表示指定 File 对象的 URL。 但是,由于某些原因(如浏览器版本更新、JavaScript 引擎优化等),在执行代码时,我们传递的参数类型不符合该方法的要求,导致了方法解析失败的错误。 解决这个问题的方法非常简单,我们只需要确认传递给 “createobjecturl” 方法的参数是否合适即可。 我们可以查看浏览器开发文档或者使用控制台进行调试,找到问题的根本原因。 在有些情况下,我们可以使用其他方法来代替 “createobjecturl” 方法,比如使用 FileReader 对象读取文件数据等等。 总之,只要我们认真分析错误提示信息,找到问题原因,再针对性地进行优化和调整,便能够解决这个问题。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

笑看、人世间@

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值