在线预览 Word 文档

引言

随着互联网技术的发展，Web 应用越来越复杂，用户对在线办公的需求也日益增加。在许多业务场景中，能够直接在浏览器中预览 Word 文档是一个非常实用的功能。这不仅可以提高用户体验，还能减少用户操作步骤，提升效率。

实现原理

1. 后端服务

假设后端服务已经提供了两个 API 接口：

getFilesList: 获取文件列表。
previewFile: 获取指定文件的内容。

const express = require('express');
const multer = require('multer');
const fs = require('fs');
const path = require('path');

const app = express();

// 定义文件夹路径
const mergedDir = path.join(__dirname, 'merged');

// 获取文件列表
app.get('/getFilesList', (req, res) => {
   
    fs.readdir(mergedDir, (err, files) => {
   
        if (err) {
   
            return res.status(500).json({
    error: '无法读取文件夹' });
        }

        // 获取每个文件的详细信息
        const fileInfos = files.map(file => {
   
            const filePath = path.join(mergedDir, file);
            const stats = fs.statSync(filePath);

            return {
   
                fileName: file,
                size: stats.size,
                upTime: stats.mtime,
                isFile: stats.isFile()
            };
        });
        let resContent = {
   
            code: 200,
            data: fileInfos || [],
            message: '查询成功'
        }

        res.json(resContent);
    });
});

// 文件预览接口
app.get('/download', (req, res) => {
   
    const {
    fileName } = req.query;
    const filePath = path.join(mergedDir, fileName);

    fs.access(filePath, fs.constants.F_OK, (err) => {
   
        if (err) {
   
            return res.status(404).json({
    error: '文件不存在' });
        }

        const stats = fs.statSync(filePath);

        if (stats.isFile()) {
   
            const contentType = getContentType(fileName);
            res.setHeader('Content-Type', contentType);
            // 对 fileName 进行编码
            const encodedFileName = encodeURIComponent(fileName);
            res.setHeader('Content-Disposition', `inline; filename=${
     encodedFileName}`);
            fs.createReadStream(filePath