js点击按钮下载图片

4,103 阅读1分钟

方法1 利用a标签的download属性

html

 <a href="http://xiaoniu.tp.pandabg.cn/测试.png" download="测试.png"></a>

或者

js

   $(".downImg").click(function (e) {
            var urlDate=$(this).prev().prev().attr("src")//图片路径
            var a=document.createElement("a")//新建a标签
            a.download="image"//下载下来的文件名
            a.href=url
            var event = new MouseEvent('click')
            a.dispatchEvent(event)
    }

上述方法存在跨域问题,可能点击的时候会导致打开新页面展示图片

方法2 将url转换成base64格式

使用canvas

  $(".downImg").click(function (e) {//按钮点击
        var imageDom=$(this).prev().prev()//图片Jquery dom
        var urlDate=imageDom.attr("src")//下载的图片路径
        var image=imageDom[0]//图片元素
        var canvas = document.createElement('canvas')//创建canvas
        canvas.width = imageDom.width()
        canvas.height = imageDom.height()
        var context = canvas.getContext('2d')
        imageW=imageDom.width()//图片宽度
        imageH=imageDom.height()//图片高度
        context.drawImage(image, 0, 0,imageW ,imageH)
        var url = canvas.toDataURL(urlDate)//转化为base64格式
        // 生成一个a元素
        var a = document.createElement('a')
        // 创建一个单击事件
        var event = new MouseEvent('click')
        // 将a的download属性设置为我们想要下载的图片名称
        a.download = name || '下载文件的名字(自定义)'
        // 将生成的URL设置为a.href属性
        a.href = url
        // 触发a的单击事件
        a.dispatchEvent(event)
  })

上述方法解决了跨域问题

附base64转blob

使用canvas

convertBase64ToBlob = (base64, fileType, slice) => {
  return new Blob(
    atob(base64)
      .match(new RegExp(`([\s\S]{${slice}})|([\s\S]{1,${slice}})`, 'g'))
      .map(function (item) {
        return new Uint8Array(
          item.split('').map(function (s, i) {
            return item.charCodeAt(i);
          })
        );
      }),
    { type: fileType }
  );
};
//使用方式
const blob = convertBase64ToBlob(data, 'application/pdf', 1024);`

希望文章能有所帮助O(∩_∩)O