Vue前端技术实现文件预览（word、excel、pdf、ppt、mp4、图片、文本）

已于 2022-04-13 16:36:22 修改
阅读量4.4k 收藏 9
点赞数 2
分类专栏： VUE 2.X VUE 3.X 文章标签： vue
于 2022-04-01 09:23:52 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/happy81997/article/details/123889556
版权

目录

Vue前端技术实现文件预览（word、excel、pdf、ppt、mp4、图片、文本）

实现方案

docx文件实现前端预览

代码实现

实现效果

pdf实现前端预览

代码实现

实现效果

excel实现前端预览

代码实现

实现效果

pptx的前端预览

Vue前端技术实现文件预览（word、excel、pdf、ppt、mp4、图片、文本）

实现方案

找了网上的实现方案，效果看起来不错，放在下面的表格里，里面有一些是可以直接通过npm在vue中引入使用。

文档格式 老的开源组件 替代开源组件
word（docx） mammoth docx-preview(npm)
powerpoint（pptx） pptxjs pptxjs改造开发
excel（xlsx） sheetjs、handsontable exceljs(npm)、handsontable(npm)(npm)
pdf（pdf） pdfjs pdfjs(npm)
图片 jquery.verySimpleImageViewer v-viewer(npm)

docx文件实现前端预览

代码实现

  • 首先npm i docx-preview

  • 引入renderAsync方法

  • 将blob数据流传入方法中，渲染word文档

import { defaultOptions, renderAsync } from "docx-preview";
renderAsync(buffer, document.getElementById("container"), null,
options: {
       className: string = "docx", // 默认和文档样式类的类名/前缀
       inWrapper: boolean = true, // 启用围绕文档内容渲染包装器
       ignoreWidth: boolean = false, // 禁止页面渲染宽度
       ignoreHeight: bo
最低0.47元/天 解锁文章
小湾生产队队长
关注
  • 2
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue中Word文件Excel文件PDF文件PPT文件的预览
R_dong_dong_的博客
09-26 1686
上传文件到服务器，然后由后端每页文件装换成图片，返回给前端展示。优点：排版适配随前端发挥，呈现效果较好。缺点：文件大内容多的时候，转图片时间会很久，不利于客户上传后立即预览。新页面打开word、pdf等office文件，使用微软提供的免费服务。缺点：若是你的文件比较注重隐私，不能公开的话，这种方式，就不太适合了，否者的话，是比较方便的解决方案。这里需要你有一个自己的服务器，并且服务器要购买域名对应，要默认80端口哦，否则依旧是无法预览。优点：简单方便好实现效果。
前端PPT预览(新开窗口在线预览或者vue本地插件预览)
qq_36685296的博客
08-30 3377
1.下载pptx.js插件。
vue 2使用vue-office/iframe/PPTXjs 实现预览xls/xlsx/docx/pdf/pptx/txt
最新发布
qq_39498157的博客
05-21 1913
vue 2使用iframe/vue-office/PPTXjs 实现预览xls/xlsx/docx/pdf/pptx/txt
vue中使用docx-preview插件预览word文档（后端express）
qq_34169240的博客
04-02 2万+
问题描述 本文记录了一下预览word文档的功能。需要用到： 前端：vue 后端：express 插件：docx-preview 思路分析 后端express代码中读取文件夹中的 .docx 类型文件 然后将其以可读流的方式返回给前端一个blob流文件 后端返回的流文件前端收到以后，执行docx-preview插件的renderAsync方法即可渲染出预览的效果 我们先看一下效果图 代码 后端express代码 // 引入文件模块 const fs = require("fs")
VUE中实现文档在线预览
xdocs的博客
09-23 2560
移动端和PC端无插件预览PDF、OFD、Word等多种文档。
vue 实现 word/excel/pdf 等文件格式预览操作
weixin_50450473的博客
07-12 1万+
/docx、excel、pdf文档预览组件，vue-office插件，其中docx文档预览是通过对docx-preview插件的二次封装，docx-preview插件不支持doc格式文件；docx文档预览是对exceljs插件的二次封装。希望我的愚见能够帮助你哦~，若有不足之处，还望指出，你们有更好的解决方法，欢迎大家在评论区下方留言支持，大家一起相互学习参考呀~有文件大小限制，超过要收费！
【Vue实用功能】Vue实现文档在线预览功能，在线预览PDF、Word、Excel、ppt等office文件
热门推荐
weixin_44590591的博客
05-30 4万+
Vue实现文档在线预览文档，在线预览PDF、Word、Excel和ppt等office文件
前端实现文件预览（word、excel、pdf、ppt、mp4、图片、文本）
04-21
前端实现文件预览（word、excel、pdf、ppt、mp4、图片、文本） 前言 ===== 在前端开发中，预览文件是一项非常重要的功能，很多业务场景下都需要实现文件预览。今天，我们将介绍如何实现文件预览，包括word、excel...
Vue实现文件预览，支持word excel pdf ppt image txt mp4等格式
10-14
这个功能尤其适用于word文档、excel表格、pdf、ppt演示文稿、图像、文本文件、json数据以及视频文件如mp4。下面将详细介绍如何在Vue项目中实现这一功能，并涵盖关键的技术点。 首先，你需要引入一个合适的库来处理...
纯前端文档预览，Vue实现，无需后端，支持Word、Excel、PPT、pdf、文本、图片，附接入demo和文档
02-09
纯原创资源，盗用必究，仅用于学习和交流，持续更新，...3. 支持所有文本、代码格式，所有主流图片格式，.mp4，.docx，.xlsx，.pptx, .pdf等主流文档格式的纯前端预览 4. 附带接入demo，使用纯js实现，可以用于任何场景
docxjs:Docx渲染库
05-07
docxjs Docx渲染库 演示 用法 <!--optional polyfill for promise--> < script src =" https://unpkg.com/promise-polyfill/dist/polyfill.min.js " > </ script > <!--lib uses jszip--> < script src =" https://unpkg.com/jszip/dist/jszip.min.js " > </ script > < script src =" docx-preview.min.js " > </ script > < script > var docData = < document> ; docx.renderAsync(docData, document.getElementById("c
基于vue2实现的纯前端文档预览demo，免费开源，支持word,excel,ppt,pdf,markdown,文本,图片,视频
01-30
iframe集成是我们最推荐的集成方式，可以跳过所有的坑，为您的项目快速集成文件预览能力。 我们还有中央仓库包供您使用，请搜索@flyfish-group，根据您的需要选择vue2组件和vue3组件。我们有开源社区，请持续关注。 ...
亲测，以html形式显示或预览word，excel，pdf，txt
05-24
在IT行业中，以HTML形式显示或预览不同的文档格式，如Word、Excel、PDF和TXT，是一种常见的需求，尤其在Web应用中。...通过学习和理解这个源码，开发者可以进一步掌握文件转换和前端预览的技术，提升自己的技能。
预览word
qq_46100747的博客
02-22 1484
前端实现预览word分为两种，一种是上传前预览（也就是前端使用input或者组件等选择文件后直接预览，此时还没有上传给后端，我定义为纯前端预览），一种是上传后预览（就是文档已经上传到后端，通过后端给的文件流实现预览）https://blog.csdn.net/kaimo313/article/details/127012225 vue里使用docx-preview预览docx文件。https://www.jianshu.com/p/8e1e90570c52 预览word excel。
【vue2中的pdf预览】iframe/pdf.js/vue-pdf
记录
09-05 3084
vue2中预览pdf的方法有pdf.js和vue-pdf等。进行简单对比&使用方法的介绍。
vue项目,内网预览.xls .pptx .ppt .doc .docx .xlsx等格式的文件方法推荐
weixin_56723577的博客
07-27 4171
内网预览word、pptf、exl等文件
vue 离线预览文件插件_vue预览word,excel,pptx,pdf文件
weixin_34460480的博客
01-31 1万+
vue预览word，excel，pptx，pdf文件1、做word，excel，pptx的预览，要先确定文件路径访问是通过域名的url来预览，不可以通过IP的url来访问先把文件路径的url进行url编码(encodeURIComponent)let router = 'https://aaaaaa.com/file/download?filename=file.obj_id' //文...
前端实现 PPT 预览
qq_40284131的博客
08-10 3738
本文将介绍前端实现 PPT 预览的背景和目的，以及常用的实现方式和其优劣势。同时，将重点介绍如何使用永中云预览实现前端 PPT 预览以及其优势。通过本文的阅读，您将了解到如何在前端实现 PPT 预览，以及该技术的应用场景。
vue实现本地预览word(docx)、excel(xlsx)、pdf文件
07-14
要在Vue应用中实现本地预览Word（.docx）、Excel（.xlsx）和PDF文件，你可以使用一些现有的库和插件。以下是一种常见的方法，使用`vue-pdf`、`xlsx`和`mammoth.js`库来实现此功能： 1. 首先，安装所需的库： ```bash npm install vue-pdf xlsx mammoth ``` 2. 创建一个Vue组件，并导入所需的库： ```vue <template> <div> <div v-if="fileType === 'pdf'"> <pdf :src="fileUrl" /> </div> <div v-else-if="fileType === 'xlsx'"> <div>{{ excelData }}</div> </div> <div v-else-if="fileType === 'docx'"> <div v-html="wordContent"></div> </div> </div> </template> <script> import { read, utils } from 'xlsx'; import mammoth from 'mammoth'; import { pdf } from 'vue-pdf'; export default { components: { pdf, }, data() { return { fileType: '', fileUrl: '', excelData: [], wordContent: '', }; }, mounted() { this.loadFile(); }, methods: { loadFile() { const file = 'path/to/your/file'; const extension = file.split('.').pop(); if (extension === 'pdf') { this.fileType = 'pdf'; this.fileUrl = file; } else if (extension === 'xlsx') { this.fileType = 'xlsx'; this.loadExcelFile(file); } else if (extension === 'docx') { this.fileType = 'docx'; this.loadWordFile(file); } }, loadExcelFile(file) { const reader = new FileReader(); reader.onload = (e) => { const data = new Uint8Array(e.target.result); const workbook = read(data, { type: 'array' }); const worksheet = workbook.Sheets[workbook.SheetNames[0]]; this.excelData = utils.sheet_to_json(worksheet, { header: 1 }); }; reader.readAsArrayBuffer(file); }, loadWordFile(file) { const reader = new FileReader(); reader.onload = (e) => { const arrayBuffer = e.target.result; const options = {}; mammoth.extractRawText({ arrayBuffer }, options) .then((result) => { this.wordContent = result.value; }) .catch((error) => { console.error(error); }); }; reader.readAsArrayBuffer(file); }, }, }; </script> ``` 在上面的代码中，你需要将`path/to/your/file`替换为实际文件的路径。根据文件的扩展名，组件将显示不同的预览方式。 请注意，该示例仅提供了一种基本实现方法。你可以根据自己的需求进行修改和调整。 希望这可以帮助到你！如果你有其他问题，请随时提问。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值