记录一种图片点击下载方法

205 阅读1分钟
downloadImg() {
  var img = document.getElementById("testImg"); // 获取要下载的图片
  var url = img.src; // 获取图片地址
  var a = document.createElement("a"); // 创建一个a节点插入的document
  var event = new MouseEvent("click"); // 模拟鼠标click点击事件
  a.download = "图片名字"; // 设置a节点的download属性值
  a.href = url; // 将图片的src赋值给a节点的href
  a.dispatchEvent(event); // 触发鼠标点击事件
}
// 解决浏览器弹窗被拦截的问题
downloadImage() {
  if (!this.origionUrl) {
    this.$Message.error("找不到图片地址");
    return;
  }
  // 移除旧的节点
  const oldNode = document.querySelector("#g-exportOrder-iframe");
  if (oldNode) {
      document.body.removeChild(
        document.querySelector("#g-exportOrder-iframe")
      );
   }
  // 生成新节点,进行下载
  const iframe = document.createElement("iframe");
  iframe.style.display = "none";
  iframe.id = "g-exportOrder-iframe";
  iframe.src = this.origionUrl;
  document.body.appendChild(iframe);
},