前端vue实现各种文件的预览，
公司最近需求当用户实现对文件上传之后，用户必要对所上传的文件举行点击查看当前文件的内容，不同文件的类型太多，对部门文件举行了处置惩罚预览，例如：pkl、mps、txt、md、doc、xlsx、pdf、json、csv、py、png、jpg先说对 [".txt", ".md", ".json", ".pkl", ".mps", ".py"]
[".txt", ".md", ".json", ".pkl", ".mps", ".py"]预览
这些类的文件自己是对于文件内容文本所预览，如果没有太大的样式追求，推荐使用 VAceEditor 这个插件，
vue3-ace-editor 是一个基于 Ace Editor（流行的 web 前端代码编辑器）封装的 Vue 3 组件库，它允许在 Vue 程序中轻松集成和自定义 Ace 编辑器的功能。
支持多种编程语言的语法高亮、自动补全、主题切换、多语言支持等高级特性，使得开辟者可以或许构建功能丰富的在线代码编辑器或 JSON 格式查看与编辑器等功能。
适用于开辟IDE、在线代码编辑器、JSON编辑器等多种应用场景|。
这个是预览出来的布局
https://i-blog.csdnimg.cn/direct/a1d91fbf9c7e43768bef2fd3ac89d2ac.png
一、安装
npm i vue3-ace-editor
https://i-blog.csdnimg.cn/direct/2c723ec201dd4d2ba6eed9f75cbb5f5f.png
https://i-blog.csdnimg.cn/direct/f238b69a434a4685953c9aa652ded94f.png https://i-blog.csdnimg.cn/direct/f71e2c08db604bcbb539ac36be57426b.png
自行对aceConfig这些属性可以设置，
当你通过某个事件去触发的时候可以去拿到地点去读取当前文件内容，我这里用某个函数去接受，拿到当前的完备地点发起请求去读取文件流，然后读取内容后追加放到效果中
https://i-blog.csdnimg.cn/direct/d35ce76d55a64b56820a1f0e45420378.png
[".ipynb"];文件预览，
Ipynb文件跟一般文件不一样，这个文件里面会包含图片、代码、文本之类的、预览ipynb文件就必要将文件流转换成html举行预览，
这里要运用到一些插件
npm install marked ansi_up dompurify jsdom
npm install prismjs
npm install babel-plugin-prismjs 开源地点：vue-ipynb: Demo to view a .ipynb (python notebook) file with VUE.
它举行预览是通过上传文件拿到文件流的时候举行预览，而我做的是后端返回地点，通过地点发请求读取文件流，
https://i-blog.csdnimg.cn/direct/bc4256e91f004915b032781295e3c6c6.png
它的开元nb文件某些情况下可能会执行报错，图片可能会预览不出来，我自己稍作了些修改，ipynb文件的图片为统一为base64格式，不然图片就不会显示出来
https://i-blog.csdnimg.cn/direct/5f4885f74f6b44268dec7c131f9552f8.png
它的这一块便是我举行修改的地方，
它的nb.parse方法接收的是两个参数我们通过读取文件流之后给的是一个参数，
https://i-blog.csdnimg.cn/direct/536fcef13efd4e008520e2808d7fd372.png他源文件这个地方也要修改，不然就会导致底层报错，
https://i-blog.csdnimg.cn/direct/e5d0b93144314cc58e014e8f90b7fafb.png
如果报错之类的都解决掉了之后，读取文件流之后将转换成html布局，预览出来的效果就是这样的
https://i-blog.csdnimg.cn/direct/7837d8eb951848e28b5c2cf90293fa93.png
这个效果就是html形式，
[".doc", ".docx", ".pdf", ".xlsx", ".csv"];
前面四种有专门的插件很好预览，
npm i @vue-office/excel
npm i @vue-office/pdf
npm i @vue-office/docx
https://i-blog.csdnimg.cn/direct/87f913b48c4d40418a9153ae57f6ce7c.png
这个是模板部门 直接将你完备的地点通报到src属性里面
https://i-blog.csdnimg.cn/direct/a146afe6f58e4600bbd44ee65d1fb8f8.png这个是script里面，你也可以通过不同的末尾去判定显示谁人文件
csv文件预览
这个文件预览要用到插件，
papaparse
下载
npm i papaparse
使用这个插件会有一个bug 比如说你的csv文件里面有中文，这个中文预览出来的效果就会是一堆乱码的样子，比如它自带的encoding设置只能对通过input上传的当地文件起作用，而通过URL远程取到的文件不支持：
先用XMLHttpRequest（）获取到文件，然后再用FileReader（）改变文件的编码，末了用PapaParse直接解析
https://i-blog.csdnimg.cn/direct/0089495857694e02a683608c56f654e2.png
https://i-blog.csdnimg.cn/direct/0f11ab770a7141e59acc331dbd046136.png
渲染出来的表格是没有边框样式的，可以自行用css举行加
https://i-blog.csdnimg.cn/direct/871555aaa9fa42a88f2fb5e17bd459bb.png
预览出来的效果就是这样
https://i-blog.csdnimg.cn/direct/ea67edee97d146d38d12b44c69639680.png
看业务要求，有些文件是无法举行预览，可以探讨直接下载
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]