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

Vue downloads files using binary streams, use:

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

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

The main reason is that this usage is not supported after Chrome is updated (and neither are other mainstream browsers), so it needs to be changed to:

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

Complete code
Vue binary stream download file reference code

/**
 * 下载文件,需要为二进制文件流
 * @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)
  }
}

Guess you like

Origin blog.csdn.net/weixin_48353638/article/details/130153825