vue 自定义指令 下载图片

export default {
    install(Vue) {
      Vue.directive("downLoadUrl", {
        inserted(el, binding) {
            el.addEventListener('click', () => {
              const a = document.createElement('a')
              //   let url = baseUrl + binding.value // 若是不完整的url则需要拼接baseURL
              const url = binding.value // 完整的url则直接使用
              // 这里是将url转成blob地址，
              fetch(url).then(res => res.blob()).then(blob => { // 将链接地址字符内容转变成blob地址
                a.href = URL.createObjectURL(blob)
                a.download = '' // 下载文件的名字
                // a.download = url.split('/')[url.split('/').length -1] //  // 下载文件的名字
                document.body.appendChild(a)
                a.click()
              })
            })
          }
      });
    },
  };

在main.js 中注册

import downLoadUrl from "./utils/downLoad"

Vue.use(downLoadUrl)

在标签上使用

              <el-button

                type="text"

                v-downLoadUrl="scope.row.produceUrl"    

                >下载稿件</el-button>

scope.row.produceUrl   是图片地址