好久没有更新文章了，说说为什么会有这篇文章呢，其实是应某个热线评论的要求出的，不过由于最近很长一段时间没打开csdn现在才看到，所以才会导致到现在才出。
先来看看封装完这个预览方法的使用，主打一个方便使用：
id:为文件id
name:为文件名称
ajaxDownLoadFile(id, name)没错就是这么简单，调用这个函数传入id和name就可以实现
进入正题，我们需要怎么去封装这么个预览pdf的工具呢。
其实我们ajaxDownLoadFile这个方法的功能主要是通过传入id和name然后去实现预览pdf文件，如果不是pdf文件的话，点击后我们应该是有一个下载的功能。
实现我们说的这两个点，主要是下面这两个函数
ajaxDownLoadFile 下载文件
ajaxPrePdf预览文件
// 下载文件
ajaxDownLoadFile(id: string, name?: string) {
const strRegex = '(.pdf)$' // 用于验证后缀是否是pdf
const re = new RegExp(strRegex)
// 如果文件名存在，同时文件为pdf
if (name&& re.test(name.toLowerCase())) {
return ajaxPrePdf(id)
} else {
//不为pdf的文件，直接请求接口下载文件
return new Promise((resolve, reject) => {
service.get({
url: XXX + id,
responseType: 'blob'
}).then(res => {
resolve(res)
}).catch(err => reject(err))
})
}
},
// 预览文件
ajaxPrePdf(id: string) {
return new Promise((resolve, reject) => {
service.get({
url: XXX + id,
responseType: 'arraybuffer'
}).then(res => {
const file = new Blob([res as any], {type: 'application/pdf'})
const fileUrl = window.URL.createObjectURL(file)
window.open(fileUrl)
resolve(res)
}).catch(err => reject(err))
})
}所以其实真正实现预览文件的功能的其实就是ajaxPrePdf这个函数。
我们通过封装的方式，让这个方法可以在我们整个项目中使用，甚至其他项目需要到pdf预览其他文件下载的功能，我们也可以直接拿过去用。主打一个简单实用。