前端解决PDF一键下载问题

前端切图工

已于 2023-12-11 16:41:45 修改

阅读量618

点赞数 8

文章标签：前端 pdf

于 2023-12-11 16:39:15 首次发布

本文链接：https://blog.csdn.net/javenaa/article/details/134930706

版权

1.在下载PDF时，使用window.open(url)或者使用创建a标签方法都是会直接打开新的页面，不能实现一键下载

2.使用xhr生成blob流+a标签即可实现一键下载

    downloadPDF(url,name) {
      var xhr = new XMLHttpRequest()
      xhr.open('GET', url, true) // url为下载的pdf地址
      xhr.responseType = 'blob' // 设置响应类型为blob，以便处理二进制数据
      xhr.onload = function () {
        if (xhr.status === 200) {
          var blob = xhr.response
          var link = document.createElement('a')
          link.style.display = 'none'
          link.href = window.URL.createObjectURL(blob)
          console.log(link, 'link')
          link.setAttribute('download', name + '.pdf') //name-文件名自更改
          document.body.appendChild(link)
          link.click()
          document.body.removeChild(link)
        }
      }
      xhr.send()
    },