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

LJPchosen12023-09-25 20:43

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