La interfaz de vue realiza la descarga de imágenes, hace clic en el botón para abrir una ventana local y selecciona una ruta de guardado personalizada.

El front-end de vue realiza la descarga del front-end y hace clic en el botón para abrir una ventana local y seleccionar una ruta de guardado personalizada.

1. Realizar la descarga

2. Implementar una ruta de guardado personalizada

Sube el código directamente, no digas tonterías, presta atención, no te pierdas
1. Descarga el código

<!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>

2. No busques el código, se puede realizar sin código.
Sigue los pasos paso a paso para
seguir la flecha roja y pinchar con el mouse
inserte la descripción de la imagen aquí
inserte la descripción de la imagen aquí
. Felicitaciones, la función está completa.

Supongo que te gusta

Origin blog.csdn.net/m0_71585401/article/details/131193969
Recomendado
Clasificación