好久没有更新文章了,说说为什么会有这篇文章呢,其实是应某个热线评论的要求出的,不过由于最近很长一段时间没打开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)$' // 用于验证后缀是否是pdfconst re = new RegExp(strRegex)// 如果文件名存在,同时文件为pdfif (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预览其他文件下载的功能,我们也可以直接拿过去用。主打一个简单实用。