解决：js 根据图片链接（image url）下载，有的打开预览，有的下载

心山

1、问题描述
https://*****/drugTestReport/20230515/202305151106111386737.png
https://*****/drugTestReport/20230605/202306051540314553141.jpg
同样结构的两个图片链接，使用window.open(url)，一个是打开预览，另一个是下载
 
2、解决方法，通过fetch请求url，获取blob类型，区分情况，统一成下载。

1. /**
2.      *  ### 适合预览操作的 Blob 类型，需要将链接地址字符内容转变成blob地址
3.           - image/png
4.           - image/jpeg
5.           - image/gif
6.           - audio/mpeg
7.           - audio/ogg
8.           - audio/wav
9.           - video/mp4
10.           - video/ogg
11.         ### 适合下载操作的 Blob 类型
12.           - text/plain
13.           - text/csv
14.           - application/pdf
15.           - application/json
16.           - application/xml
17.           - application/zip
18.           - application/octet-stream
19.      */
20.     async function downloadImg(url) {
21.       try {
22.         const res = await fetch(url);
23.         if (!res.ok) {
24.           throw new Error("fetch network response was not ok");
25.         }
26.         const blob = await res.blob();
27.         if (
28.           blob.type.includes("image") ||
29.           blob.type.includes("audio") ||
30.           blob.type.includes("video")
31.         ) {
32.           const a = document.createElement("a");
33.           a.href = URL.createObjectURL(blob);
34.           a.download = "";
35.           document.body.appendChild(a);
36.           a.click();
37.         } else {
38.           window.open(url);
39.         }
40.       } catch (error) {
41.         //有些图片url请求本身就出现了跨域等问题，目前纯前端本人还无解，只能直接open
42.         console.log("catcherror", err);
43.         window.open(url);
44.       }
45.     }

复制代码

 

来源:https://www.cnblogs.com/qianyou304/p/17482340.html
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！