vue点击pdf文件直接在浏览器中预览文件

好久没有更新文章了，说说为什么会有这篇文章呢，其实是应某个热线评论的要求出的，不过由于最近很长一段时间没打开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预览其他文件下载的功能，我们也可以直接拿过去用。主打一个简单实用。