php pdf 预览 非下载,如何预览以及下载pdf文件

前言

前端操作文件流是一项比不可少的技能

今天我们来使用blob来进行pdf文件的预览以及下载

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

知识点

预览pdf

预览pdf可以借助iframe的src属性来传入blob文件流以达到预览的目的htmljsfunction loadpdf() {

axios({

method: 'get',

url:

'http://wzhichao.gitee.io/wzc570738205.github.io/img/180428d43t262z6z263z4d.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:

'http://wzhichao.gitee.io/wzc570738205.github.io/img/180428d43t262z6z263z4d.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的预览以及下载的简单实现方法，你还有更好的方法吗？可以分享出来供大家学习一下🍺