vue预览和下载txt、PDF、execl等在线文件

因为浏览器默认能直接打开TXT、PDF等文件索引默认就是点击链接打开文件。但是浏览器却又不能在线打开execl、world等文件。

现在我们可以统一的实现文件的预览以及下载。

下载文件

 

 downloadfile方法

downloadfile(url,fileName){
                const newUrl = url;
            const x = new XMLHttpRequest();
            x.open("GET", newUrl, true);
            x.responseType = "blob";
            x.onload = () => {
                const url = URL.createObjectURL(x.response);
                const a = document.createElement("a");
                a.href = url;
                a.download = fileName;
                a.target = "_blank";
                a.click();
            };
            x.send();
                 
        },

这样我们就直接统一的下载了

浏览器查看文件

因为浏览器不能直接查看execl等文件所以需要使用插件

可以使用这个插件

kkFileView - 在线文件预览kkFileView官网 - kkFileView使用Spring Boot搭建，易上手和部署，基本支持主流办公文档的在线预览，如doc,docx,Excel,pdf,txt,zip,rar,图片等等https://kkfileview.keking.cn/zh-cn/index.html

前端的使用方法

 npm install --save js-base64

let Base64 = require('js-base64').Base64

 look(url){
            window.open('http://172.xx.xx.xxx:8012/onlinePreview?url='+encodeURIComponent(Base64.encode(url)));
        },

 这样我们也能在浏览器上在线查看execl等浏览器不支持的文件了