这里分两种网络情况来叙说:外网、内网

txt、pdf可被浏览器直接打开,就不说了,只要有浏览器两种网络情况都可打开【浏览器兼容性就不讨论了】

一、外网环境

借用网络上的在线工具,例如微软的在线预览功能“https://view.officeapps.live.com/op/view.aspx?src=”,src则是静态资源的地址。不多说,网上搜一搜

二、内网环境

1、网络上提供很多开放的js插件,对应的文件如下

.doc、.docxdocx-preview
.pptxpptxjs
xlsxexceljs
图片v-viewer

2、因本次的需求重点是要预览文本文件,例如:脚本文件.sh、python文件.py、配置文件.toml/.properties、日志文件.log等等

我想到的方法是将文件转换成文件流,然后获取文件内容,最后使用pre标签保留原始缩进渲染

文件 ——> Bolo对象——>读文件内容——>pre标签渲染

axios({
    method: 'get',
    responseType: 'blob',
    url: '静态文件地址'
}).then(({ data }) => {
    // data则为获取到的Blob数据,获取文件内容有两种方式
    // 方式一
    data.text().then((res) => {
        console.log(res)
    })
    // 方式二
    const reader = new FileReader()
    reader.readAsText(data)
    reader.onload = function (e) {
        console.log(reader.result)
    }
})

 这样获取的文件类型其实是个字符串,如果想要保留原来文件的缩进换行样式得使用pre标签去渲染

Logo

前往低代码交流专区

更多推荐