file download create Salesforce LWC

  //download map as png
  downloadAsPng1() {
    var me = this;
    let width = me.template.querySelector("svg.d3").getBoundingClientRect().width;
    let height = me.template.querySelector("svg.d3").getBoundingClientRect().height;
    try {
      const output = { name: "result1.png", width: width, height: height };
      let svg =
        '<svg  style="width: 100%; height: 100%" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">' +
        me.template.querySelector("svg.d3").innerHTML +
        "</svg>";
      const uriData = `data:image/svg+xml;base64,${btoa(svg)}`; // it may fail.
      //const uriData = `data:image/svg+xml;base64,${btoa(new XMLSerializer().serializeToString(svgElem))}`;
      const img = new Image();
      img.src = uriData;
      img.onload = function () {
        var canvas = document.createElement("canvas");
        [canvas.width, canvas.height] = [output.width, output.height];
        const ctx = canvas.getContext("2d");
        ctx.imageSmoothingQuality = "high";
        ctx.drawImage(img, 0, 0);
        const quality = 1.0; // https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/imageSmoothingQuality
        me.dhref = canvas.toDataURL("image/png", quality);
        me.dfilename = output.name;
      };

      img.onerror = function (err) {
        console.log("errr", err);
      };
    } catch (err) {
      console.log(err);
    }
  }

  downloadAsPng2() {
    var me = this;
    let width = me.template.querySelector("svg.d3").getBoundingClientRect().width;
    let height = me.template.querySelector("svg.d3").getBoundingClientRect().height;
    const output = { name: "result2.png", width: width, height: height };
    try {
      let svg =
        '<svg  xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">' +
        me.template.querySelector("svg.d3").innerHTML +
        "</svg>";

      me.dfilename = output.name;

      let blob = new Blob([svg], { type: "image/svg+xml;charset=utf-8" });

      let reader = new FileReader();
      reader.readAsDataURL(blob); // converts the blob to base64 and calls onload

      reader.onload = function () {
        const img = new Image();
        img.src = reader.result;
        img.onload = function () {
          var canvas = document.createElement("canvas");
          [canvas.width, canvas.height] = [output.width, output.height];
          const ctx = canvas.getContext("2d");
          ctx.imageSmoothingQuality = "high";
          ctx.drawImage(img, 0, 0);
          const quality = 1.0; // svgString
          me.dhref = canvas.toDataURL("image/png", quality);
          me.dfilename = output.name;
        };

        img.onerror = function (err) {
          console.log("errr", err);
        };
      };
      reader.onerror = function (e, t, y) {
        console.log(e, t, y);
      };
    } catch (err) {
      console.log(err);
    }
  }

  downloadAsPng3() {
    try {
      let me = this;
      me.imageDownload = { download: true };
      //Clone svg node
      let svg = me.template.querySelector("svg.d3");
      //Remove outer transform
      svg.querySelector("g").removeAttribute("transform");
      //Get ngative width and height to make image fit in screen
      let nigativeX = 0;
      let nigativeY = 0;
      d3.selectAll(me.template.querySelectorAll("svg.d3 .recordNode"))
        .data()
        .forEach((item) => {
          if (item.x < 0 && item.x < nigativeX) {
            nigativeX = item.x;
          }
          if (item.y < 0 && item.y < nigativeY) {
            nigativeY = item.y;
          }
        });
      //Image height and width
      let width = svg.querySelector("g").getBoundingClientRect().width + 60;
      let height = svg.querySelector("g").getBoundingClientRect().height + 60;
      width = width < 1000 ? 1000 : width;
      height = height < 1000 ? 1000 : height;
      //Create image
      var image = new Image();
      const output = { name: "result3.png", width: width, height: height };
      //Get svg string
      var svgString = getSVGString(svg);
      //Convert to iamge
      svgString2Image(svgString, width, height, "png", save); // passes Blob and filesize String to the callback
      //Save
      function save(dataURL) {
        me.imageDownload = { download: true, href: dataURL, fileName: output.name };
        me.template.querySelector(".canvasview").appendChild(image);
      }
      // Below are the functions me handle actual exporting:
      // getSVGString ( svgNode ) and svgString2Image( svgString, width, height, format, callback )
      function getSVGString(svgNode) {
        let svgString = `<svg viewBox="${nigativeX - 60} ${
          nigativeY - 60
        } ${width} ${height}"  style="background-color: white;" width="${width}" height="${height}" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
          ${svgNode.innerHTML}</svg>`;

        return svgString;
      }

      function svgString2Image(svgString, width, height, format, callback) {
        var format = format ? format : "png";

        var imgsrc = "data:image/svg+xml;base64," + btoa(unescape(encodeURIComponent(svgString))); // Convert SVG string to data URL

        var canvas = document.createElement("canvas");
        var ctx = canvas.getContext("2d");

        canvas.width = width;
        canvas.height = height;

        image.onload = function () {
          ctx.clearRect(0, 0, width, height);
          ctx.imageSmoothingQuality = "high";
          ctx.drawImage(image, 0, 0, width, height);
          const quality = 1.0;
          callback(canvas.toDataURL("image/png", quality));
        };
        image.onerror = function () {
          console.log("error genrating image");
        };

        image.src = imgsrc;
      }
    } catch (err) {
      console.log(err);
    }
  }