如何預覽以及下載pdf文件

歡迎加入前端交流羣749539640

前言

前端操做文件流是一項比不可少的技能
今天咱們來使用blob來進行pdf文件的預覽以及下載

話說沒有demo的代碼不是好代碼

DEMO

知識點

blob
Common_types 常見 MIME 類型列表
createObjectURL

預覽pdf

預覽pdf能夠藉助iframe的src屬性來傳入blob文件流以達到預覽的目的

• html

  <iframe src="" id="iframe" frameborder="0"></iframe>

• js

  function loadpdf() {
  axios({
    method: 'get',
    url:
     'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-8e76dff9-ce38-4577-9e5c-398943705060/a5b050b8-3fa1-4436-b231-7b40725de731.pdf',
    responseType: 'blob',
  }).then(function (response) {
    let blob = new Blob([response.data], { type: response.data.type })
    let url = URL.createObjectURL(blob)
    document.getElementById('iframe').src = url
  })
  }

• 注意事項

responseType務必指定爲blob

new Blob文件類型能夠寫爲response.data.type或者參考MINE類型列表寫爲application/pdf

下載pdf

下載pdf咱們藉助於URL.createObjectURL()靜態方法會建立一個 DOMString經過a標籤來進行下載

function dowanloadpdf() {
    axios({
      method: 'get',
      url:
        'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-8e76dff9-ce38-4577-9e5c-398943705060/a5b050b8-3fa1-4436-b231-7b40725de731.pdf',
      responseType: 'blob',
    }).then(function (response) {
      const link = document.createElement('a')
      let blob = new Blob([response.data], { type: response.data.type })
      let url = URL.createObjectURL(blob)
      link.href = url
      link.download = '前端工程師必備技能.pdf'
      link.click()
    })
  }

以上就是pdf的預覽以及下載的簡單實現方法，你還有更好的方法嗎？能夠分享出來供你們學習一下🍺