如何预览以及下载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的预览以及下载的简单实现方法，你还有更好的方法吗？可以分享出来供大家学习一下🍺

交流群