首页 > 其他分享 >解决:js 根据图片链接(image url)下载,有的打开预览,有的下载

解决:js 根据图片链接(image url)下载,有的打开预览,有的下载

时间:2023-06-15 11:11:33浏览次数:42  
标签:url image application blob 图片链接 open 下载

1、问题描述

https://*****/drugTestReport/20230515/202305151106111386737.png

https://*****/drugTestReport/20230605/202306051540314553141.jpg

同样结构的两个图片链接,使用window.open(url),一个是打开预览,另一个是下载

 

2、解决方法,通过fetch请求url,获取blob类型,区分情况,统一成下载。

/**
     *  ### 适合预览操作的 Blob 类型,需要将链接地址字符内容转变成blob地址
          - image/png
          - image/jpeg
          - image/gif
          - audio/mpeg
          - audio/ogg
          - audio/wav
          - video/mp4
          - video/ogg
        ### 适合下载操作的 Blob 类型
          - text/plain
          - text/csv
          - application/pdf
          - application/json
          - application/xml
          - application/zip
          - application/octet-stream
     */
    async function downloadImg(url) {
      try {
        const res = await fetch(url);
        if (!res.ok) {
          throw new Error("fetch network response was not ok");
        }
        const blob = await res.blob();
        if (
          blob.type.includes("image") ||
          blob.type.includes("audio") ||
          blob.type.includes("video")
        ) {
          const a = document.createElement("a");
          a.href = URL.createObjectURL(blob);
          a.download = "";
          document.body.appendChild(a);
          a.click();
        } else {
          window.open(url);
        }
      } catch (error) {
        //有些图片url请求本身就出现了跨域等问题,目前纯前端本人还无解,只能直接open
        console.log("catcherror", err);
        window.open(url);
      }
    }

 

标签:url,image,application,blob,图片链接,open,下载
From: https://www.cnblogs.com/qianyou304/p/17482340.html

相关文章

  • 一招解锁Triller无水印视频下载技能,支持安卓和ios!!
    最近比较爱玩triller,一个类似抖音的短视频平台,不同的是Triller平台的用户群体覆盖了全球200多个国家和地区,好比只面向国内的群体内容更丰富,这也是我现在喜欢用它的原因之一,唯一的缺点就是上面的视频下载下来会有水印,呜呜呜哭死我了!我连找了三天,终于被我找到了能无水印下载triller视......
  • eclipse下载地址
    eclipse  3.3.2,下面是官网的下载地址之一。下载地址:http://download.actuatechina.com/eclipse/eclipse/downloads/drops/R-3.3.2-200802211800/eclipse-SDK-3.3.2-win32.zipmyeclipse6.5http://downloads.myeclipseide.com/downloads/products/eworkbench/6.5.1GA/MyEclipse_6......
  • 批量下载微软云blob容器到本地(解决内容编码是gzip下载后乱码的问题)
    问题1(无法解决):因为要将微软云存储中的数据迁移到其他腾讯云cos中。但是由于微软云存储每一个blob容器中存在内容编码为gzip的js、css文件。导致在腾讯云上,使用存储迁移功能的时候,从微软云迁移到腾讯云存储的js、css文件都无法完全同步(js、css文件会同步失败)。所以只能先下载到本......
  • vray5.2 for SketchUp2017-2022插件安装教程(vray5.2安装包下载)
    vray5.2 forSketchUp2017-2022 Win版/64位下载地址:https://pan.baidu.com/s/1uqcVJrHl6Ae3yjsYZDUXmg密码:hdth材质库(大小17.00G,选择性安装)下载地址:https://pan.baidu.com/s/1q5xrChwJ4ocIMhfFvboF_g密码:fjn4[简介]:vrayforSketchUp是专门为草图大师推出的插件,是一款主流、实用......
  • 深浅拷贝、第三方模块的下载与安装、开发流程
    深浅拷贝详解1.对于不可变对象,深拷贝和浅拷贝的效果是一样的,因为不可变对象不需要在内存中复制2.对于可变对象,深拷贝和浅拷贝的效果是有区别的,主要原因在于可变对象自身的可变性质浅拷贝1.1使用数据类型本身的构造器list1=[1,2,3]list2=list(list1)print(list2)pri......
  • 浏览器输入URL到网页完全呈现的过程
    前言临近计算机网络期末考试,最近在复习(预习),写一遍博客讲解加深印象.浏览器输入URL过程图浏览器输入URL过程:当用户在网页上输入网址URL后,浏览器会对网址进行DNS域名解析获得对应的ip地址.之后,浏览器客户端向服务器尝试建立连接,进行TCP三次握手.......
  • 深浅copy、第三方模块的下载与安装
    深浅copy对于不可变类型,深拷贝和浅拷贝的效果是一样的。对于可变类型,深拷贝和浅拷贝是有区别的。浅拷贝:两者的值是相同的,在内存中重新申请了一块空间来存放新变量,所以两者的内存地址是不一样的list1=[1,2,3]list2=list(list1)print(list2)print("list1==list2?",li......
  • 深浅copy和第三方模块下载与安装
    深浅copy不可变对象,深浅copy效果一样可变对象,深浅copy还是有区别的浅copy字典、列表、集合结果都一样list1=[1,2,3]list2=list(list1)print(list2)print("list1==list2?",list1==list2)print("list1islist2?",list1islist2)[1,2,3]list1==list2?Tru......
  • 《Java并发编程的艺术》pdf电子书免费下载
    《Java并发编程的艺术》正是为了解决这个问题而写的。书中采用循序渐进的讲解方式,从并发编程的底层实现机制入手,逐步介绍了在设计Java并发程序时各种重要的技术、设计模式与应用,同时辅以丰富的示例代码,使得开发人员能够更快地领悟Java并发编程的要领,围绕着Java平台的基础并发功能......
  • 聚支付 最新版源码分享 下载,完美运行
    聚支付是什么水分我就不多说了,懂的都懂支持易支付和码支付等功能能正常运营全开源全开源全开源完美运营Php+Mysql,完美运行 下载地址:点击前往下载聚合支付源码(原文的底部有下载地址)源码文件截图运行后......