Vue前端文件预览工具

最新推荐文章于 2024-09-06 23:18:33 发布

蒋承畅

最新推荐文章于 2024-09-06 23:18:33 发布

阅读量241

点赞数 4

本文链接：https://blog.csdn.net/gitblog_09746/article/details/141974291

版权

Vue前端文件预览工具

filepre.zip项目地址:https://gitcode.com/open-source-toolkit/1b055

简介

本项目提供了一个基于Vue.js的前端文件预览工具，支持多种文件格式的预览，包括Word、PDF、Excel、图片、视频等。特别地，本工具还支持base64格式的文件预览，能够将base64字符串转换为Blob流并在前端页面中展示。

功能特点

多格式支持：支持Word、PDF、Excel、图片、视频等多种文件格式的预览。
base64格式支持：能够解析并预览base64格式的文件。
Blob流转换：将base64字符串转换为Blob流，实现文件在前端的直接展示。
前端选择文件：用户可以直接在前端选择文件并进行预览。
后端请求支持：支持从后端获取base64字符串并进行转码预览。

使用方法

1. 安装依赖

首先，确保你已经安装了Vue.js环境。然后，克隆本仓库并安装依赖：

git clone https://github.com/your-repo-url.git
cd your-repo-directory
npm install

2. 运行项目

在安装完依赖后，运行项目：

npm run serve

3. 文件预览

前端选择文件预览：在页面中选择文件后，文件将直接在前端页面中展示。
后端获取base64字符串预览：通过请求后端接口获取base64字符串，工具会自动将其转换为Blob流并在前端页面中展示。

示例代码

以下是一个简单的示例代码，展示了如何在前端选择文件并进行预览：

<template>
  <div>
    <input type="file" @change="handleFileChange" />
    <div v-if="fileUrl">
      <iframe :src="fileUrl" width="100%" height="600px"></iframe>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      fileUrl: null,
    };
  },
  methods: {
    handleFileChange(event) {
      const file = event.target.files[0];
      const reader = new FileReader();
      reader.onload = (e) => {
        this.fileUrl = e.target.result;
      };
      reader.readAsDataURL(file);
    },
  },
};
</script>