前言：

        js实现链接下载本地，图片点击非查看也是下载本地，文件流blob文件下载本地

1、图片地址用window.open的话，会在浏览器新开页面查看，但是无法下载

可下载的方法：

使用a标签配合download属性。这个属性告诉浏览器将链接作为一个可下载资源

<a href="你的图片URL" download="下载后的文件名.jpg">
  <img src="你的图片URL" alt="图片描述">
</a>

2、其他文件的链接的下载，比如:

http://192.168.1.1:8080/img/1.pdf  这类的链接

下载方法整理：

/**
 * @Description: 下载方法
 * @Author: hao
 * @Date: 2024-07
 * @params fileUrl=文件链接  fileName=文件名称
 * @return 无
 */
export function downFileUrlHX(fileUrl,fileName) {
  let downloadElement = document.createElement("a")
  downloadElement.href = fileUrl
  downloadElement.download = fileName
  downloadElement.style.display = "none"
  document.body.appendChild(downloadElement)
  downloadElement.click()
  window.URL.revokeObjectURL(downloadElement.href)
  document.body.removeChild(downloadElement)
}

3、如果是blob文件流的方法

axios请求接口

 axios.get("地址", {
    responseType: "blob", //返回的数据类型为blob
 })

拿到blob文件以后的下载

/**
 * @Description: 下载方法-blob文件
 * @Author: hao
 * @Date: 2024-07
 * @params blob=文件流  fileName=文件名称
 * @return 无
 */
export function downFileBlobHX(blob,fileName) {
  let downloadElement = document.createElement('a')
  let href = window.URL.createObjectURL(blob) //创建下载的链接
  downloadElement.href = href
  downloadElement.download = fileName //下载后文件名
  document.body.appendChild(downloadElement)
  downloadElement.click() //点击下载
  document.body.removeChild(downloadElement) //下载完成移除元素
  window.URL.revokeObjectURL(href) //释放掉blob对象
}

其他资料：

js实现链接下载本地，图片点击非查看也是下载本地，文件流blob文件下载本地_js根据链接下载图片-CSDN博客文章浏览阅读728次。js实现链接下载本地，图片点击非查看也是下载本地，文件流blob文件下载本地。_js根据链接下载图片https://blog.csdn.net/weixin_44727080/article/details/140517905?spm=1001.2014.3001.5502