[JavaScript知识库]vue项目前端做文件预览

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

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

一、外网环境

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

二、内网环境

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

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标签去渲染

《新程序员》：云原生和全面数字化实践

50位技术专家共同创作，文字、视频、音频交互阅读