【技术实现步骤摘要】
本专利技术涉及软件开发，具体涉及一种基于vue3.0的前端多种格式文件在线预览方法。
技术介绍
1、随着互联网技术的不断发展，前端h5对于文件的处理越发成熟，用户也对当前可操作的场景要求越来越高，当用户需要上传(包括但不限于)数据文件到服务端并且将数据落库的过程中，往往是将文件解析成文件流直接上传，至于传输内容只能依赖于用户在上传之前反复核对，但还是会出现漏填数据，填写数据有误，或上传错文件的情况，以至于当生产数据需要修改时，人工会通过复杂的审批流程最终才能够修改数据，当需要下载文件到本地时，往往是将文件下载到本地缓存文件夹，再通过文件夹找到对应的文件进行操作，这样的操作无疑降低了当前用户的工作效率(尤其是数据部门的日常工作)。
2、针对生产环境中上传文件保存落库时，如果选择了错误的文件并且上传成功了，一般会由开发人员在数据库中直接操作删除该条数据重新上传，这样做的缺点是增加了开发人员的负担并且影响了生产环境的稳定性，如果是上传数据文件并且填写了错误的信息的话，一般由后端接口直接报错提示上传不合法，这样做的缺点是当数据文件体量较大时，增加了服务端算力的负担，如果是下载文件到本地，用户不能实时看到下载的文件，需要找到缓存文件夹再找到对应的文件进行操作，大大降低了工作效率。
技术实现思路
1、本专利技术目的是针对
技术介绍
中存在的问题，提出一种基于vue3.0的前端多种格式文件在线预览方法。
2、本专利技术的技术方案：一种基于vue3.0的前端多种格式文件在线预览
3、前端通过input原生表单控件对不同格式的文件流进行获取；
4、对获取到的所述文件流进行类型识别，并对不同类型的所述文件流进行类型标识；
5、基于前后端多种格式文件类型，引入不同的前端模板渲染引擎；
6、根据不同类型的所述文件流，使用不同的所述前端模板渲染引擎对所述文件流进行预处理，从而得到标准文件流；
7、使用前端原生标签对所述标准文件流进行渲染，使所述标准文件流完整的展示在h5页面上。
8、优选的，所述对获取到的所述文件流进行类型识别，并对不同类型的所述文件流进行类型标识，包括：
9、通过对获取到的所述文件流进行后缀分析，识别所上传的文件流的格式；
10、对于没有后缀名的所述文件流，对所述文件流中的格式字段进行读取，从而识别所上传的文件流的格式。
11、优选的，所述基于前后端多种格式文件类型，引入不同的前端模板渲染引擎，包括：
12、对于图片类型的所述文件流，前端引入原生img标签和所述img标签的src属性；
13、对于word类型的所述文件流，前端引入docx-preview技术；
14、对于excel类型的所述文件流，前端引入xlsx和拆分sheet技术；
15、对于pdf类型的所述文件流，前端引入pdfjs-dist和canvas技术。
16、优选的，所述根据不同类型的所述文件流，使用不同的所述前端模板渲染引擎对所述文件流进行预处理，从而得到标准文件流，包括：
17、在所述文件流上传给服务端之前和所述文件流下载至前端之后，使用所述前端模板渲染引擎进行所述文件流解析；
18、所述前端模板渲染引擎包括img标签、docx-preview技术、拆分sheet技术、pdfjs-dist和canvas技术。
19、优选的，所述文件流上传，包括：
20、目标用户点击相应文件流进行上传；
21、前端通过input标签获取所述目标用户上传的所述文件流；
22、前端通过所述文件流后缀和所述文件流的类型确定上传的所述文件流的格式；
23、前端根据上传的所述文件流的格式，使用不同的所述前端模板渲染引擎解析所述文件流；
24、前端通过原生input标签和原生canvas标签对解析完成的所述文件流进行在线渲染。
25、优选的，所述文件流下载，包括：
26、前端通过axios从服务端获取所述文件流和所述文件流对应的格式；
27、前端根据不同格式的文件流，加载对应的文件流解析引擎，所述文件流解析引擎包括docx-preview、pdfjs-dist和canvas技术；
28、根据加载到的所述文件流解析引擎，对获取到的所述文件流进行解析；
29、前端通过input和canvas原生组件将解析好的所述文件流转换为目标浏览器可渲染的dom文件树结构；
30、将解析好的所述dom文件树结构渲染在h5页面上。
31、与现有技术相比，本专利技术的上述技术方案具有如下有益的技术效果：
32、1、本专利技术可以让用户在上传文件之前做到二次确认，也可以通过下载文件时在线解析的方式让用户直接看到自己下载的文件，大大减少用户的操作流程，提高工作效率。
33、2、本专利技术在文件下载后或上传之前实时预览多种不同格式文件的功能，大大简化了用户下载文件后再去文件夹中打开文件的繁琐流程，提高用户体验。
34、3、本专利技术实现了前端多种格式文件在线预览的功能，在一些没有必要下载文件到本地的情况下，强烈推荐在线预览，提高服务性能。
本文档来自技高网...【技术保护点】
1.一种基于vue3.0的前端多种格式文件在线预览方法，所述多种格式文件包括pdf、xlsx、docx和图片格式文件，其特征在于，包括：
2.根据权利要求1所述的一种基于vue3.0的前端多种格式文件在线预览方法，其特征在于：所述对获取到的所述文件流进行类型识别，并对不同类型的所述文件流进行类型标识，包括：
3.根据权利要求1所述的一种基于vue3.0的前端多种格式文件在线预览方法，其特征在于：所述基于前后端多种格式文件类型，引入不同的前端模板渲染引擎，包括：
4.根据权利要求1所述的一种基于vue3.0的前端多种格式文件在线预览方法，其特征在于：所述根据不同类型的所述文件流，使用不同的所述前端模板渲染引擎对所述文件流进行预处理，从而得到标准文件流，包括：
5.根据权利要求4所述的一种基于vue3.0的前端多种格式文件在线预览方法，其特征在于：所述文件流上传，包括：
6.根据权利要求4所述的一种基于vue3.0的前端多种格式文件在线预览方法，其特征在于：所述文件流下载，包括：
【技术特征摘要】
1.一种基于vue3.0的前端多种格式文件在线预览方法，所述多种格式文件包括pdf、xlsx、docx和图片格式文件，其特征在于，包括：
2.根据权利要求1所述的一种基于vue3.0的前端多种格式文件在线预览方法，其特征在于：所述对获取到的所述文件流进行类型识别，并对不同类型的所述文件流进行类型标识，包括：
3.根据权利要求1所述的一种基于vue3.0的前端多种格式文件在线预览方法，其特征在于：所述基于前后端多种格式文件类型，引入不同的前端模板渲...
【专利技术属性】
技术研发人员：任治天，赵岩，
申请(专利权)人：上海创帧软件有限公司，
类型：发明
国别省市：
还没有人留言评论。发表了对其他浏览者有用的留言会获得科技券。