快捷導(dǎo)航

vue實(shí)現(xiàn)圖片下載點(diǎn)擊按鈕彈出本地窗口選擇自定義保存路徑功能

更新時(shí)間：2023年12月01日 14:56:14 作者：秋石蘭

vue前端實(shí)現(xiàn)前端下載,并實(shí)現(xiàn)點(diǎn)擊按鈕彈出本地窗口,選擇自定義保存路徑,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧

一、下載代碼

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title></title>
    <meta name="description" content="" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="stylesheet" href="" />
  </head>
  <body>
    <a onclick="fn1()" style="cursor: pointer">aaaaaaa</a>
    <script>
      var arr = [
        "https://img0.baidu.com/it/u=4162443464,2854908495&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500",
      ];
      function downloadIamge(imgsrc, name) {
        let image = new Image();
        image.setAttribute("crossOrigin", "anonymous");
        image.onload = function () {
          let canvas = document.createElement("canvas");
          canvas.width = image.width;
          canvas.height = image.height;
          let context = canvas.getContext("2d");
          context.drawImage(image, 0, 0, image.width, image.height);
          let url = canvas.toDataURL("image/png");
          let a = document.createElement("a");
          let event = new MouseEvent("click");
          a.download = name || "photo";
          a.href = url;
          a.dispatchEvent(event);
        };
        image.src = imgsrc;
      }
      function WriteToFile(sText) {
        with (document) {
          ir = createElement("iframe");
          ir.id = "ifr";
          ir.location = "about:blank";
          ir.style.display = "none";
          body.appendChild(ir);
          with (getElementById("ifr").contentWindow.document) {
            open();
            write(sText);
            close();
            if (document.compatMode && document.all) {
              execCommand("SaveAs", false, ".txt");
            } else {
              location = "data:application/rtf," + encodeURIComponent(sText);
            }
          }
          setTimeout(function () {
            body.removeChild(ir);
          }, 1000);
        }
      }
      function fn1() {
        for (let i = 0; i < arr.length; i++) {
          downloadIamge(arr[i]);
        }
      }
    </script>
  </body>
</html>

二、別找代碼了，不用代碼就可以實(shí)現(xiàn)

以下按照步驟一步一步來(lái)
按照紅色箭頭所指，用鼠標(biāo)戳它

在這里插入圖片描述

恭喜你，功能完成了

到此這篇關(guān)于vue實(shí)現(xiàn)圖片下載點(diǎn)擊按鈕彈出本地窗口選擇自定義保存路徑功能的文章就介紹到這了,更多相關(guān)vue點(diǎn)擊下載圖片內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: