前端实现文件预览img、docx、xlsx、ppt、pdf、md、txt、audio、video

文章预览

前言 最近有接到一个需求，要求前端支持上传制定后缀文件，且支持页面预览，上传简单，那么预览该怎么实现呢，尤其是不同类型的文件预览方案，那么下面就我这个需求的实现，分不同情况来讲解一下👇 具体的预览需求：  预览需要支持的文件类型有： png、jpg、jpeg、docx、xlsx、ppt、pdf、md、txt、audio、video ，另外对于不同文档还需要有定位的功能。例如： pdf  定位到页码， txt 和 markdown 定位到文字并滚动到指定的位置，音视频定位到具体的时间等等。 ⚠️ 补充：我的需求是需要先将文件上传到后台，然后我拿到 url 地址去展示，对于 markdown 和 txt 的文件需要先用 fetch 获取，其他的展示则直接使用 url 链接就可以。 不同文件的实现方式不同，下面分类讲解，总共分为以下几类： 自有标签文件： png、jpg、jpeg、audio、video 纯文字的文件： markdown ………………………………