如何预览以及下载pdf文件

JenK

欢迎加入前端交流群749539640

前言

前端操作文件流是一项比不可少的技能
今天我们来使用blob来进行pdf文件的预览以及下载

话说没有demo的代码不是好代码

DEMO

知识点

blob
Common_types 常见 MIME 类型列表
createObjectURL

预览pdf

预览pdf可以借助iframesrc属性来传入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的预览以及下载的简单实现方法,你还有更好的方法吗?可以分享出来供大家学习一下🍺

阅读 3k
avatar
JenK
北京中电兴发 前端工程师

理想的光芒很难照进现实

7.7k 声望
5.9k 粉丝
0 条评论
你知道吗?

avatar
JenK
北京中电兴发 前端工程师

理想的光芒很难照进现实

7.7k 声望
5.9k 粉丝
宣传栏