前端实现在线预览word(docx)，pdf，excel类型的文件

实现方案

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

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

docx文件实现前端预览

代码实现

首先npm i docx-preview (官网连接:https://www.npmjs.com/package/docx-preview)
引入renderAsync方法
将blob数据流传入方法中，渲染word文档
只支持Blob | ArrayBuffer | Uint8Array这三种类型的数据

import { defaultOptions, renderAsync } from "docx-preview";
renderAsync( Blob | ArrayBuffer | Uint8Array, document.getElementById("container"), null,{className: string = "docx", // 默认和文档样式类的类名/前缀inWrapper: boolean = true, // 启用围绕文档内容渲染包装器ignoreWidth: boolean = false, // 禁止页面渲染宽度ignoreHeight: boolean = false, // 禁止页面渲染高度ignoreFonts: boolean = false, // 禁止字体渲染breakPages: boolean = true, // 在分页符上启用分页ignoreLastRenderedPageBreak: boolean = true,//禁用lastRenderedPageBreak元素的分页experimental: boolean = false, //启用实验性功能（制表符停止计算）trimXmlDeclaration: boolean = true, //如果为真，xml声明将在解析之前从xml文档中删除debug: boolean = false, // 启用额外的日志记录}
);

实现效果

pdf实现前端预览

使用步骤

首先npm i pdfjs-dist
设置PDFJS.GlobalWorkerOptions.workerSrc的地址
通过PDFJS.getDocument处理pdf数据，返回一个对象pdfDoc
通过pdfDoc.getPage单独获取第1页的数据
创建一个dom元素，设置元素的画布属性
通过page.render方法，将数据渲染到画布上

代码实现

import * as PDFJS from "pdfjs-dist/legacy/build/pdf";
// 设置pdf.worker.js文件的引入地址
PDFJS.GlobalWorkerOptions.workerSrc = require("pdfjs-dist/legacy/build/pdf.worker.entry.js");
// data是一个ArrayBuffer格式，也是一个buffer流的数据
PDFJS.getDocument(data).promise.then(pdfDoc=>{const numPages = pdfDoc.numPages; // pdf的总页数// 获取第1页的数据pdfDoc.getPage(1).then(page =>{// 设置canvas相关的属性const canvas = document.getElementById("the_canvas");const ctx = canvas.getContext("2d");const dpr = window.devicePixelRatio || 1;const bsr =ctx.webkitBackingStorePixelRatio ||ctx.mozBackingStorePixelRatio ||ctx.msBackingStorePixelRatio ||ctx.oBackingStorePixelRatio ||ctx.backingStorePixelRatio ||1;const ratio = dpr / bsr;const viewport = page.getViewport({ scale: 1 });canvas.width = viewport.width * ratio;canvas.height = viewport.height * ratio;canvas.style.width = viewport.width + "px";canvas.style.height = viewport.height + "px";ctx.setTransform(ratio, 0, 0, ratio, 0, 0);const renderContext = {canvasContext: ctx,viewport: viewport,};// 数据渲染到canvas画布上page.render(renderContext);})
})

实现效果

ps:当然服务器也可以穿pdf的在线预览链接，我们通过window.open(’pdf地址‘) 重新打开一个浏览器窗口就能浏览了。

excel实现前端预览

使用步骤

npm install xlsx ，注意要安装0.16.0的版本

<template><div><input type="file" @change="upload" /></div>
</template><script setup>
//在线预览excel
import XLSX from "xlsx";
//我们一般从后台获取文件数据或者本地读取xlsx格式的文件基本都是获取的arraybuffer类型，我们将其转为unit8Array格式的数组，之后xlsx插件会帮我们将其解析。
//最终解析出来的数据格式是一个数组，数组每一项是一个对象，该对象代表之前xlsx每一行数据。对象中的每个属性代表每一列的表头
var upload = function (e) {const reader = new FileReader();var file = e.target.files[0];reader.readAsArrayBuffer(file);//将文件对象读取为arraybuffer类型的数据reader.onload = (event) => {var data = new Uint8Array(event.target.result);var workbook = XLSX.read(data, { type: "array" });var sheetNames = workbook.SheetNames; // 工作表名称集合var worksheet = workbook.Sheets[sheetNames[0]];var excelData = XLSX.utils.sheet_to_json(worksheet);console.log(excelData)//最终解析xlsx格式的文件得出来的数据};
};
</script><style>
</style>

实现效果

pptx的前端预览

主要是通过jszip库，加载二进制文件，再经过一些列处理处理转换实现预览效果，实现起来比较麻烦，就不贴代码了，感兴趣的可以下载代码查看。

实现效果

代码地址：https://github.com/zhuye1993/file-view
作者:竹业 https://juejin.cn/post/7071598747519549454

前端实现在线预览word(docx)，pdf，excel类型的文件相关推荐

（开源kkFileView、kkOffice）在线预览word、pdf、ofd、excel、ppt、压缩包、图片等等
(开源kkFileView.kkOffice)在线预览word.pdf.ofd.excel.ppt.压缩包.图片等前言此项目为文件文档在线预览项目解决方案,对标业内付费产品有[永中office][ ...
在线预览Word、PDF、图片（IE、Edge、Google、FireFox等主流浏览器）
支持IE.Edge.Google.FireFox等主流浏览器处理在线预览Word.PDF.JPG.JPEG等格式文件或图片. var id=ID; if(id!=undefined){var hasI ...
vue在线预览word，pdf， xls，ppt 文档
首先先踩坑(也不算坑,只是跟我的需求不匹配) 一 ,官方渠道使用微软提供的Office Online平台只需要一个网址即可在线查看Xls,doc,PPT等文档 http://view.officea ...
在线预览word文档
在线预览word文档在线预览word文档 Java 使用wps将word文件转换pdf文件转成PDF 在线预览word(转成pdf)前端展示欢迎来提更好的意见在线预览word文档昨天下午组长 ...
前端在线预览word,excel,pdf
前端在线预览word,excel,pdf 预览Word 预览pdf 预览Excel 预览Word 微软的在线预览功能,可以预览word.ppt.Excel.PDF 局限: 需要外网能访问文件,如果是只 ...
【前端实现在线预览ppt、word、xls、pdf、视频】
前端实现在线预览ppt.word.xls.pdf.视频一. 预览ppt.word.xls 注意:无法打开文档? 二. pdf 三. 视频预览一. 预览ppt.word.xls 转载地址: http ...
在线浏览pdf doc html,前端实现在线预览pdf、word、xls、ppt等文件
1.前端实现pdf文件在线预览功能方式一: 通过a标签href属性实现 pdf文件理论上可以在浏览器直接打开预览但是需要打开新页面.在仅仅是预览pdf文件且UI要求不高的情况下可以直接通过a标签hr ...
前端页面预览word_详解html实现在线预览word、excel、pdf等文件的功能（附代码）_WEB前端开发...
JavaScript判断"字典"为空的方法_WEB前端开发字典是一种存储键值对的数据结构,Javascript中的Object类内部即实现为一个字典,本文就来为大家介绍一下判断字 ...
Springboot 超简单实现在线预览,Word文档 doc、xlsx、pdf、txt等
前言 PDF.TXT 只要资源可访问,根本就不需要进行任何处理,直接访问查看就完事了. 也是因为这个PDF可以直接查看(现在浏览器基本支持了),那么我们实现Word文档在线预览,其实也是把WORD文 ...
mvc直接在html页面预览pdf,Asp.net MVC 实现在线预览word、excel、ppt、pdf文件
在线预览word.excel.ppt 原理:主要是引用第三方Dll使本地word.excel.ppt文件转换成Html 需要引用 : Aspose.Cells.dll Aspose.Slides.dl ...