vue3.0+TS 实现点击下载直接下载pdf文件，而不是预览。

最新推荐文章于 2024-05-22 10:31:30 发布

造梦者FZ

最新推荐文章于 2024-05-22 10:31:30 发布

阅读量3k

点赞数 2

分类专栏： vue 文章标签： javascript vue.js 前端

本文链接：https://blog.csdn.net/qq_43923146/article/details/127231415

版权

vue 专栏收录该内容

80 篇文章 5 订阅

订阅专栏

vue3.0+TS 实现点击下载直接下载pdf文件，而不是预览。

在这里插入图片描述


    //下载
    function downflie(item:any){  //item.attachments是附件。
      let arr=item.attachments[0].url.split('/reactor/data/')
      axios({
        url:process.env.VUE_APP_UPLOAD_HOST+arr[1],
        method:'get',
        responseType: 'blob',
      }).then((res:any)=>{
        if(res.data.size > 0){
          const content = res.data
          const blob = new Blob([content])
          const fileName = `${arr[1]}.pdf`
            if ('download' in document.createElement('a')) { // 非IE下载
              const elink = document.createElement('a')
              elink.download = fileName
              elink.style.display = 'none'
              elink.href = URL.createObjectURL(blob)
              document.body.appendChild(elink)
              elink.click()
              URL.revokeObjectURL(elink.href) // 释放URL 对象
              document.body.removeChild(elink)
            } 
            // else { // IE10+下载
            //   navigator.msSaveBlob(blob, fileName)
            // }
          }
      })
    }