FileViewer纯前端预览项目Vue2 demo

news2024/11/24 3:22:39

FileViewer 项目Vue2 demo

运行图

本demo基于vue-cli+js+vue2.x构建,如果您需要vue3版本的demo,请前往main分支。

适用于Vue2 + Webpack,本集成方法要求最低Webpack版本为5,也就是Vue Cli Service 5.0.0以上,当然,iframe集成没有任何限制

注意,为了版本稳定性,在iframe集成的场景下,无论是vue2版本还是vue3版本,都建议使用file-viewer3以获得最佳性能。

我们针对该项目进行了深度优化,npm仓库搜索 @flyfish-group/file-viewer就可以找到了,最新的是1.0.4版本。

方式一:iframe集成(推荐)

iframe集成是我们最推荐的集成方式,可以跳过所有的坑,为您的项目快速集成文件预览能力。

源码准备

下载我们的最新版本的file-viewer源码,然后执行npm build build,或者yarn build

构建产物集成

然后将构建后的dist目录拷贝到您项目的public目录下。当然也可以放置到任何项目中。本demo只是演示。

如果您在公网,建议您使用我们的cdn:

https://viewer.flyfish.dev

以获得高效的访问。

如果您在内网,可以完全参照本demo进行实施。

添加iframe标签

您可以实现一个组件,内部包含一个<iframe>标签,接下来您有两种方法进行文件切换。

  1. 使用url控制切换(推荐)

这种方式是最便捷的实现方式,适合有文件链接的方案。如果你的文件是流式传输或者需要用于上传体验,则不适合该方案。

  1. 使用postMessage发送文件数据

    这种方式适合本地上传或者后端返回流式二进制数据。

示例的IframeViewer.vue组件实现如下,该组件同时支持两种文件控制方式,您可以直接集成:

<template>
   <iframe title="文档预览" ref="frame" :src="src" class="iframe-viewer"/>
</template>

<script>

   // 查看器的源,当前示例为本源,指定为location.origin即可
   const viewerOrigin = location.origin;

   // iframe路径指向构建产物,这里是/,因为放在了public下面
   // 如果使用cdn,请使用https://viewer.flyfish.dev
   const source = '/dist/index.html'

   export default {
      name: 'IframeViewer',
      props: {
         url: String,
         file: File,
         name: String,
      },
      mounted() {
         this.sendFileData();
      },
      computed: {
         // 构建完整url
         src() {
            // 文件名称,建议传递,提高体验性
            const name = this.name || '';
            if (this.url) {
               // 直接拼接url
               return `${source}?url=${encodeURIComponent(this.url)}&name=${encodeURIComponent(name)}`
            } else if (this.file) {
               // 直接拼接来源origin
               return `${source}?from=${encodeURIComponent(viewerOrigin)}&name=${encodeURIComponent(name)}`
            } else {
               return source;
            }
         }
      },
      methods: {
         // 发送文件数据
         sendFileData() {
            this.nextTick(() => {
               // iframe引用
               const viewer = this.$refs.frame;
               if (!viewer || !this.file) return;
               viewer.onload = () => viewer.contentWindow?.postMessage(this.file, viewerOrigin);
            })
         }
      }
   }
</script>

<style scoped>
   .iframe-viewer {
      height: calc(100vh - 2px);
      width: 100%;
      border: 0
   }
</style>

方式二: 使用仓库依赖集成

该方案适合有定制化需求,或者想要控制显示样式或者灵活控制渲染的开发需求。

为了您能够快速集成本项目,我们在中央仓库发布了我们的NPM包。具体地址如下:

  • Vue2版本

  • Vue3版本

您可以根据项目架构快速选用组件。

以下是示例代码:

main.js

import Vue from 'vue'
import FileViewer from '@flyfish-group/file-viewer'

// 导入样式
import '@flyfish-group/file-viewer/dist/style.css'

Vue.use(FileViewer);

new Vue({
   render: h => h(App),
}).$mount('#app')

InnerViewer.vue

<template>
   <div class='simple-view'>
      <file-viewer :url="url" />
   </div>
</template>

<script>
   export default {
      name: 'InnerViewer',
      props: {
         url: String,
      },
   }
</script>

<style scoped>
   .simple-view {
      width: 100%;
      height: calc(100vh - 2px);
   }
</style>

需要注意的是,内置组件file-viewer支持使用data的方式传入文件的二进制数据,您可以自行从服务器拉取集成。以下是组件API。

属性名类型示例属性描述
fileFile | Blob | ArrayBuffernew Blob(…)支持文件、二进制blob和arraybuffer数组缓存
urlString“https://flyfish.dev/1.docx”支持任意服务器文件url,需要支持跨域访问,即存在cors响应头

开源代码下载:
CSDN下载渠道
开源渠道

开源仓库社区:
https://git.flyfish.dev

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1422105.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

万户 ezOFFICE wpsservlet SQL注入漏洞复现

0x01 产品简介 万户OA ezoffice是万户网络协同办公产品多年来一直将主要精力致力于中高端市场的一款OA协同办公软件产品,统一的基础管理平台,实现用户数据统一管理、权限统一分配、身份统一认证。统一规划门户网站群和协同办公平台,将外网信息维护、客户服务、互动交流和日…

Word莫名其妙开启兼容模式将其永久取消的方法

这是因为Word模板文件被意外更改了 找到Word模板文件&#xff0c;目录在C:\Users\15976\AppData\Roaming\Microsoft\Templates 15976替换成你自己的用户名&#xff0c;不确定的就先点进C/Users看一看&#xff0c; AppData是隐藏文件夹&#xff0c;显示隐藏文件夹才能看见&am…

腾讯云SSL证书在阿里云添加域名DNS解析

场景说明 在阿里云申请并备案了域名&#xff0c;这个域名理论上可以在任何服务器上进行绑定。应用服务器部署到腾讯云&#xff0c;并在腾讯云申请了SSL证书&#xff0c;从而完成HTTPS转化。那么问题来了&#xff0c;腾讯提供的免费版SSL证书是一年有效期&#xff0c;到期后就需…

EVAP-COND蒸发器和冷凝器设计软件

EVAP-COND蒸发器和冷凝器设计软件 是一个软件包&#xff0c;其中包含NIST的翅片管蒸发器和冷凝器仿真模型。“逐管”建模方案允许指定复杂的制冷剂回路&#xff0c;对这些回路之间的制冷剂分配进行建模&#xff0c;并考虑到不均匀的空气分配。模拟结果包括每个管的局部参数&…

MyBatis常见面试题汇总

说一下MyBatis执行流程&#xff1f; MyBatis是一款优秀的基于Java的持久层框架&#xff0c;它内部封装了JDBC&#xff0c;使开发者只需要关注SQL语句本身&#xff0c;而不需要花费精力去处理加载驱动、创建连接等的过程&#xff0c;MyBatis的执行流程如下&#xff1a; 加载配…

单片机开发通用功能组件

mcu_reuse_development_module 单片机可复用、可通用开发组件&#xff0c;是以中间件思想开发的一套功能模块&#xff0c;将具有代表性或使用次数较多的功能和协议栈封装为独立的组件供开发者使用&#xff0c;开发者仅需通过组件提供的接口对接驱动层和应用层即可使用组件功能…

科微/金航标kinghelm一直在技术上不断创新

宋仕强说&#xff0c;萨科微slkor&#xff08;www.slkoric.com&#xff09;/金航标kinghelm&#xff08;www.kinghelm.net&#xff09;一直在技术上不断创新&#xff0c;并将这些新技术应用于公司的产品中&#xff0c;推出的新产品&#xff0c;这让我们比同行发展快一些&#x…

【论文阅读|小目标分割算法ASF-YOLO】

论文阅读|小目标分割算法ASF-YOLO 摘要&#xff08;Abstract&#xff09;1 引言&#xff08;Introduction&#xff09;2 相关工作&#xff08;Related work&#xff09;2.1 细胞实例分割&#xff08;Cell instance segmentation&#xff09;2.2 改进的YOLO用于实例分割&#xf…

[机器学习]TF-IDF算法

一.TF-IDF算法概述 什么是TF-IDF&#xff1f; 词频-逆文档频率&#xff08;Term Frequency-Inverse Document Frequency&#xff0c;TF-IDF&#xff09;是一种常用于文本处理的统计方法&#xff0c;可以评估一个单词在一份文档中的重要程度。简单来说就是可以用于文档关键词的提…

postgresql 查询缓慢原因分析

pg_stat_activity 最近发现系统运行缓慢&#xff0c;查询数据老是超时&#xff0c;于是排查下pg_stat_activity 系统表&#xff0c;看看有没有耗时的查询sql SELECT pid, state, query, query_start, backend_type FROM pg_stat_activity WHERE state active AND query LIK…

C#用正则表达式验证格式:电话号码、密码、邮编、手机号码、身份证、指定的小数点后位数、有效月、有效日

正则表达式在程序设计中有着重要的位置&#xff0c;经常被用于处理字符串信息。 用Regex类的IsMatch方法&#xff0c;使用正则表达式可以验证电话号码是否合法。 一、涉及到的知识点 Regex类的IsMatch方法用于指示正则表达式使用pattern参数中指定的正则表达式是否在输入字符串…

springBoot+Vue汽车销售源码

源码描述: 汽车销售管理系统源码基于spring boot以及Vue开发。 针对汽车销售提供客户信息、车辆信息、订单信息、销售人员管理、 财务报表等功能&#xff0c;提供经理和销售两种角色进行管理。 技术架构&#xff1a; idea(推荐)、jdk1.8、mysql5.X(不能为8驱动不匹配)、ma…

exec函数族和守护进程

exec函数族 进程调用exec函数族执行某个程序 进程当前内容被指定程序替换 实现让父子进程实现不同的程序: 父进程创建子进程 子进程调用exec函数族 父进程不受影响 execl和execlp #include <stdio.h> int execl (const char * path, const char * arg , ...); i…

计算机网络_1.2因特网概述

1.2因特网概述 一、网络、互联网与因特网的区别与联系1、网络2、互联网3、因特网4、 互联网与因特网辨析 二、因特网介绍1、因特网发展的三个阶段2、因特网简介&#xff08;1&#xff09;因特网服务提供者&#xff08;ISP&#xff09;&#xff08;2&#xff09;因特网已经发展成…

中科星图——2020年全球30米地表覆盖精细分类产品V1.0(29个地表覆盖类型)

数据名称&#xff1a; 2020年全球30米地表覆盖精细分类产品V1.0 GLC_FCS30 长时序 地表覆盖 动态监测 全球 数据来源&#xff1a; 中国科学院空天信息创新研究院 时空范围&#xff1a; 2015-2020年 空间范围&#xff1a; 全球 数据简介&#xff1a; 地表覆盖分布…

redisTemplate.opsForValue()

redisTemplate ​在Spring Data Redis中&#xff0c;redisTemplate 是一个非常重要的组件&#xff0c;它为开发者提供了各种操作 Redis 的方法。对于 opsForValue() 方法&#xff0c;它是用来获取一个操作字符串值的操作对象。这意味着你可以使用它来执行各种字符串相关的操作…

海外短剧系统国际短剧源码h5多语言版app挂载tiktok油管ins

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目 前言 一、海外短剧系统是什么&#xff1f; 二、海外短剧系统功能与运营方式介绍 1.系统功能 2.短剧APP运营方式 总结 前言 本文简单介绍海外短剧系统的功能&#xff…

MySQL数据库如何生成分组排序的序号

点击上方蓝字关注我 经常进行数据分析的小伙伴经常会需要生成序号或进行数据分组排序并生成序号。在MySQL8.0中可以使用窗口函数来实现&#xff0c;可以参考历史文章有了这些函数&#xff0c;统计分析事半功倍进行了解。而MySQL5.7中由于没有这类函数&#xff0c;该如何实现呢&…

安全测试-pikachu靶场搭建

pikachu靶场搭建 文章目录 pikachu安装步骤 pikachu pikachu是一个自带web漏洞的应用系统&#xff0c;在这里包含了常见的web安全漏洞&#xff0c;也就是练习的靶场。 练习内容包括&#xff1a; 1.暴力破解 2.XSS 3.CSRF 4.SQL注入 5.RCE 6.文件包含 7.不安全的文件下载 8.不安…

【智能家居入门2】(MQTT协议、微信小程序、STM32、ONENET云平台)

此篇智能家居入门与前两篇类似&#xff0c;但是是使用MQTT协议接入ONENET云平台&#xff0c;实现微信小程序与下位机的通信&#xff0c;这里相较于使用http协议的那两篇博客&#xff0c;在主程序中添加了独立看门狗防止程序卡死和服务器掉线问题。后续还有使用MQTT协议连接MQTT…