vue3 点击下载文件,不打开预览,已解决

发布时间:2023-12-09 08:30

需求背景:vue3项目点击下载按钮,下载文件,使用页面添加a标签方式会导致不是下载而是打开文件(图片/pdf)

使用了直接动态添加a标签的方法,还是会打开预览

        const url = \'http://192.168.60.59:8888/fayuan/head/4b33a2a1-3911-4586-9878-50373a1fb852.jpg\'
        const a = document.createElement(\'a\')
        a.setAttribute(\'download\', \'\')
        a.setAttribute(\'href\', url)
        a.click() // 自执行点击事件

解决 :

   setup() {
      const down = () => {
        const url = \'http://file.fayuan.com/tiaojie/wechatImg/website/ali-mini-operation.pdf\'
        const filename = \'操作指南\'
        const x = new XMLHttpRequest()
        x.open(\'GET\', url, true)
        x.responseType = \'blob\'
        x.onload = e => {
          // 会创建一个 DOMString,其中包含一个表示参数中给出的对象的URL。这个 URL 的生命周期和创建它的窗口中的 document 绑定。这个新的URL 对象表示指定的 File 对象或 Blob 对象。
          const url = window.URL.createObjectURL(x.response)
          const a = document.createElement(\'a\')
          a.href = url
          a.download = filename
          a.click()
        }
        x.send()
      }
      return {
        down
      }
    }

\"vue3

ItVuer - 免责声明 - 关于我们 - 联系我们

本网站信息来源于互联网,如有侵权请联系:561261067@qq.com

桂ICP备16001015号