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

article/2025/8/25 14:18:05

实现方案

找了网上的实现方案，效果看起来不错，放在下面的表格里，里面有一些是可以直接通过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>