本文介绍: 本项目作为当前仓库vue3构建版本,会跟随vue2版本持续更新,敬请期待,欢迎提交issue和交流技术。注意,当前版本v3分支。如果要使用Vue2版本,请访问项目是本人基于实际工作共享的第一个小项目,诞生于2022年上旬。目前实现基本格式预览。本项目按计划支持vue3 + vite,并持续优化pptxword模块

基于Vue3实现文件在线预览 fileviewer

效果预览

本项目作为当前仓库的vue3构建版本,会跟随vue2版本持续更新,敬请期待,欢迎提交issue和交流技术。

注意,当前版本v3分支。如果要使用Vue2版本,请访问

https://blog.csdn.net/wybaby168/article/details/129264431

本项目是本人基于实际工作共享的第一个小项目,诞生于2022年上旬。目前实现基本格式预览
本项目按计划支持vue3 + vite,并持续优化pptxword模块

欢迎各位友友们提交工单和P/R,感谢大家

预览渲染图:
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

Vue3版本特性

  1. 高质量的TypeScript代码重构模块,更加优雅的实现等你发现
  2. 使用极速响应的Vite架构,畅快开发
  3. 完全重构了部分模块,如Word,Excel,Pptx组件
  4. 优化Excel主题颜色解析,完美还原Excel样式
  5. 优化Pptx响应速度,使用重用逻辑
  6. 优化Pptx加载项,解耦图表部分,待重构解耦相关NvD3依赖
  7. 使用完全的组合式API构建应用,高性能低占用
  8. 解耦了样式依赖,FileViewer组件依赖父节点进行布局自动填满

快速开始

1. 项目安装

npm install

2. 项目编译以及支持热加载开发模式

npm run dev

3. 编译生产包并最小化文件资源

npm run build

4. 检测修复 JavaScript 代码中的问题

npm run lint

集成指南

1. 项目引用集成

Tips: 本集成方式将会全量引入本项目的所有代码和依赖,所以可能会在您的项目中产生依赖版本冲突,请注意甄别。如果发生很多的依赖冲突,建议立即更换iframe集成方式,更轻量级,且日后能够无缝升级

如果您使用了flyfish的私库,请使用以下命令安装依赖即可

npm install --save file-viewer3

常规情况下,请使用npm link方式进行集成

假设您将本项目clone到了D:Worksfile-viewer下,接下来请按照下面的步骤进行安装

首先,打开命令行工具cd [你的项目位置]然后执行npm link D:Worksfile-viewer 最后,在您的项目中引用即可

import { createApp } from 'vue'
import App from './App.vue'
import FileViewer from 'file-viewer3'

createApp(App).use(FileViewer)
  .mount('#app')

然后,只需要在您的项目中直接使用组件即可

注意:您需要自己定义预览器的父元素预览默认会占满父元素

示例如下,该示例定义了一个全屏的预览控件,并传入了一个url用于展示

<script setup lang='ts'&gt;
import { onMounted, ref } from 'vue'

const url = ref<string&gt;()

onMounted(() =&gt; {
  url.value = 'http://flyfish.group/%E6%95%B0%E6%8D%AE%E4%B8%AD%E5%8F%B0%E7%AC%94%E8%AE%B0(1).docx';
})
</script&gt;
<template&gt;
  <div class='simple-view'&gt;
    <file-viewer :url="url" /&gt;
  </div&gt;
</template&gt;

<style scoped&gt;
.simple-view {
  height: 100vh;
}
</style>


此外,组件还支持直接传入文件或者二进制进行展示。具体请查看HelloWord.vue

2. 使用iframe集成(推荐)

注:本部分示例代码位于master分支

开发集成
  1. 请按照“快速开始”章节运行您的示例项目
  2. 打开example文件夹中的embedded.html修改目标地址本地调试地址
var context = {
    // 查看器的源,当前示例为在线本地测试请改为 http://localhost:8900
    origin: 'http://localhost:8900',
    // 目标frame
    frame: null,
    // 文件url
    url: './word.docx'
};
  1. 直接打开该文件或者使用本地web服务访问
  2. 具体请参考demo代码,原理基于iframe跨域通信机制。

3. Vue项目集成

如果您是vue项目,建议直接集成iframe,可以获得极大的便捷性,以下是简单步骤

  1. 请将构建产物放到您的/public目录下,如/public/file-viewer3
  2. 按照如下demo编写组件
<script setup lang="ts">
import {computed, nextTick, onMounted, ref} from "vue";

const props = defineProps<{
    url?: string,
    file?: File,
    name?: string,
}>()

// iframe引用
const frame = ref<HTMLIFrameElement>();
// iframe路径指向构建产物,这里是/,因为放在了public下面
// 如果使用cdn,请使用http://viewer.flyfish.group
const source = '/file-viewer3/index.html'
// 查看器的源,当前示例为本源,指定location.origin即可
const viewerOrigin = location.origin;
// 构建完整url
const src = computed(() => {
    // 文件名称,建议传递,提高体验
    const name = props.name || '';
    if (props.url) {
        // 直接拼接url
        return `${source}?url=${encodeURIComponent(props.url)}&amp;name=${encodeURIComponent(name)}`
    } else if (props.file) {
        // 直接拼接来源origin
        return `${source}?from=${encodeURIComponent(viewerOrigin)}&amp;name=${encodeURIComponent(name)}`
    } else {
        return source;
    }
})

// 发送文件数据
const sendFileData = () => {
    nextTick(() => {
        const viewer = frame.value;
        if (!viewer || !props.file) return;
        viewer.onload = () => viewer.contentWindow?.postMessage(props.file, viewerOrigin);
    })
}

onMounted(() => {
    sendFileData();
})
</script>

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

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

  1. 使用组件
    假如文档地址为url,直接写入props即可
<IframeViewer :url="url" />

此外,如果传入file文件,也可以直接支持

<IframeViewer :file="file" :name="file.name" />

原文地址:https://blog.csdn.net/wybaby168/article/details/129954677

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。

如若转载,请注明出处:http://www.7code.cn/show_6997.html

如若内容造成侵权/违法违规/事实不符,请联系代码007邮箱:suwngjj01@126.com进行投诉反馈,一经查实,立即删除

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注