js一键保存当前页面所有图片

码农Robin

已于 2023-03-13 09:31:46 修改

阅读量706

点赞数

分类专栏：前端文章标签： javascript 前端 html

于 2023-03-08 23:03:17 首次发布

本文链接：https://blog.csdn.net/weixin_41423450/article/details/129413740

版权

前端专栏收录该内容

6 篇文章 0 订阅

订阅专栏


<html>
<head>
<head>
　　<meta charset="utf-8" name=”viewport”content=”width=device-width,initial-scale=1″/>
    </head>
<title>一键保存</title>
 <link rel="shortcut icon" href="n2.ico" type="image/x-icon">
<script type="text/javascript">
	function downloadImage(filename, url) {
  fetch(url)
    .then((res) => res.blob())
    .then((blob) => {
      // create URL and Link
      const url = window.URL.createObjectURL(blob);
      const a = document.createElement("a");
      a.href = url;
      a.download = filename;
      document.body.appendChild(a);

      // Invoke download
      a.click();

      // remove URL and Link
      window.URL.revokeObjectURL(url);
      a.remove();
    })
    .catch((err) => console.error(err.message));
}

function downloadImages(urls) {
	obj = document.getElementsByClassName("image");
	for (var i = 0; i<obj.length;i++){
		var url = obj[i].src;
		setTimeout(() => {
      // codes for downloading an image
      downloadImage(`${Date.now()}`, url);
    }, i * 1000);
	}
}
downloadImages();
</script>
</head>
<body bgcolor="#ccffcc">
<table width="390" border="2" align="center">
         <tr>
         	<td>
	            <img class="image" src="20220330.jpg" width="390" height="390">
	            <img class="image" src="20220330.jpg" width="390" height="390">
	            <img class="image" src="20220330.jpg" width="390" height="390">
	            <img class="image" src="20220330.jpg" width="390" height="390">
	            <img class="image" src="20220330.jpg" width="390" height="390">
        	</td>
    	</tr>
        <tr>
        	<td>
        		<button onclick="downloadImages()">一键保存</button>
        	</td>
        </tr>
</table>
</body>
</html>

以上代码在ios safari浏览器打开时会报错“webkitblobresouce error1”或者“webkitblobresouce 错误1”。
解决方案：

<html>
<head>
    <head>

        　　<meta charset="utf-8" name=”viewport”content=”width=device-width,initial-scale=1″/>
    </head>
    <title>一键保存</title>
    <link rel="shortcut icon" href="n2.ico" type="image/x-icon">
    <script type="text/javascript">

        function download(href, filename = '') {
            const a = document.createElement('a');
            a.download = filename;
            a.href = href;
            document.body.appendChild(a);
            a.click();
            a.remove();
        }

        function downloadImages() {
            const obj = document.getElementsByClassName("image");
            for (let i = 0; i<obj.length; i++){
                const url = obj[i].src;
                console.log(url);
                setTimeout(() => {
                    // codes for downloading an image
                    download(url, `${Date.now()}`);
                }, i * 1000);
            }
        }
        downloadImages();
    </script>
</head>

<body bgcolor="#ccffcc">
<table width="390" border="2" align="center">
    <tr>
        <td>
            <img class="image" src="/1.png" width="390" height="390">
            <img class="image" src="/1.png" width="390" height="390">
            <img class="image" src="/1.png" width="390" height="390">
            <img class="image" src="/1.png" width="390" height="390">
            <img class="image" src="/1.png" width="390" height="390">
        </td>
    </tr>
    <tr>
        <td>
            <button onclick="downloadImages()" width="390" height="390">一键保存</button>
        </td>
    </tr>
</table>
</body>
</html>

ios下载后，图片会保存到【文件】中