前端实现在线预览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实现前端预览

使用步骤

1. 首先npm i pdfjs-dist
2. 设置PDFJS.GlobalWorkerOptions.workerSrc的地址
3. 通过PDFJS.getDocument处理pdf数据，返回一个对象pdfDoc
4. 通过pdfDoc.getPage单独获取第1页的数据
5. 创建一个dom元素，设置元素的画布属性
6. 通过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实现前端预览

使用步骤

1. 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