在线预览 Word 文档

弁言

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

1. 后端服务

假设后端服务已经提供了两个 API 接口：
getFilesList: 获取文件列表。
previewFile: 获取指定文件的内容。

1. const express = require('express');
2. const multer = require('multer');
3. const fs = require('fs');
4. const path = require('path');
6. const app = express();
8. // 定义文件夹路径
9. const mergedDir = path.join(__dirname, 'merged');
11. // 获取文件列表
12. app.get('/getFilesList', (req, res) => {
13.     fs.readdir(mergedDir, (err, files) => {
14.         if (err) {
15.             return res.status(500).json({ error: '无法读取文件夹' });
16.         }
18.         // 获取每个文件的详细信息
19.         const fileInfos = files.map(file => {
20.             const filePath = path.join(mergedDir, file);
21.             const stats = fs.statSync(filePath);
23.             return {
24.                 fileName: file,
25.                 size: stats.size,
26.                 upTime: stats.mtime,
27.                 isFile: stats.isFile()
28.             };
29.         });
30.         let resContent = {
31.             code: 200,
32.             data: fileInfos || [],
33.             message: '查询成功'
34.         }
36.         res.json(resContent);
37.     });
38. });
40. // 文件预览接口
41. app.get('/download', (req, res) => {
42.     const { fileName } = req.query;
43.     const filePath = path.join(mergedDir, fileName);
45.     fs.access(filePath, fs.constants.F_OK, (err) => {
46.         if (err) {
47.             return res.status(404).json({ error: '文件不存在' });
48.         }
50.         const stats = fs.statSync(filePath);
52.         if (stats.isFile()) {
53.             const contentType = getContentType(fileName);
54.             res.setHeader('Content-Type', contentType);
55.             // 对 fileName 进行编码
56.             const encodedFileName = encodeURIComponent(fileName);
57.             res.setHeader('Content-Disposition', `inline; filename=${encodedFileName}`);
58.             fs.createReadStream(filePath).pipe(res);
59.         } else {
60.             res.status(400).json({ error: '不是一个文件' });
61.         }
62.     });
63. });
65. // 获取文件的 MIME 类型
66. function getContentType(fileName) {
67.     const ext = path.extname(fileName).toLowerCase();
68.     switch (ext) {
69.         case '.js':
70.             return 'application/javascript';
71.         case '.json':
72.             return 'application/json';
73.         case '.html':
74.             return 'text/html';
75.         case '.css':
76.             return 'text/css';
77.         case '.txt':
78.             return 'text/plain';
79.         case '.png':
80.             return 'image/png';
81.         case '.jpg':
82.         case '.jpeg':
83.             return 'image/jpeg';
84.         case '.gif':
85.             return 'image/gif';
86.         case '.pdf':
87.             return 'application/pdf';
88.         case '.doc':
89.             return 'application/msword';
90.         case '.docx':
91.             return 'application/vnd.openxmlformats-officedocument.wordprocessingml.document';
92.         case '.ppt':
93.             return 'application/vnd.ms-powerpoint';
94.         case '.pptx':
95.             return 'application/vnd.openxmlformats-officedocument.presentationml.presentation';
96.         case '.xlsx':
97.             return 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet';
98.         default:
99.             return 'application/octet-stream';
100.     }
101. }
103. // 启动服务器
104. const PORT = process.env.PORT || 3000;
105. app.listen(PORT, () => {
106.     console.log(`Server is running on port ${PORT}`);
107. });

复制代码

2. 前端页面

前端页面使用 Vue.js 和 Element UI 组件库来实现文件列表展示和预览功能。
文件列表展示

• 在组件的 created 生命周期钩子中调用 getFileName 方法，从后端获取文件列表。
  
• 使用 timeStampToString 工具函数将时间戳转换为可读的日期格式。
  
• 将处理后的数据赋值给 tableData，并在表格中展示。
  

1. async getFileName() {
2.   const { code, data: resData } = await getFilesList(this.form);
3.   if (code === 200) {
4.     resData.forEach(item => {
5.       item.upTime = timeStampToString(item.upTime);
6.     });
7.     this.tableData = resData;
8.   }
9. }

复制代码

预览 Word 文档

• 当用户点击“预览”按钮时，触发 previewDocx 方法。
  
• 该方法吸收当前行的数据对象 { fileName }，并调用 previewFile API 获取文件内容。
  

1. async previewDocx({ fileName }) {
2.   try {
3.     const response = await previewFile(fileName);
4.     const reader = new FileReader();
6.     reader.onload = async (event) => {
7.       const arrayBuffer = event.target.result;
8.       const result = await mammoth.convertToHtml({ arrayBuffer });
9.       const htmlContent = result.value;
11.       // 创建一个新的窗口
12.       const newWindow = window.open('', '_blank');
14.       // 在新窗口中写入 HTML 内容
15.       newWindow.document.write(`
16.         <!DOCTYPE html>
17.         <html>
18.         <head>
19.           <title>Word 文档预览</title>
20.           <meta charset="UTF-8">
21.           <style>
22.             /* 添加一些样式以改善预览效果 */
23.             body {
24.               font-family: Arial, sans-serif;
25.               margin: 20px;
26.             }
27.           </style>
28.         </head>
29.         <body>
30.           ${htmlContent}
31.         </body>
32.         </html>
33.       `);
35.       // 确保新窗口的内容加载完成
36.       newWindow.document.close();
37.     };
38.     reader.readAsArrayBuffer(response);
39.   } catch (err) {
40.     console.error('Failed to preview file', err);
41.   }
42. }

复制代码

使用 Mammoth 库文件转换

• mammoth 是一个将 Word 文档（.docx）转换为 HTML 的库。
  
• 在 reader.onload 回调中，使用 mammoth.convertToHtml 方法将文件的二进制数据（ArrayBuffer）转换为 HTML 字符串。
  

1. const result = await mammoth.convertToHtml({ arrayBuffer });
2. const htmlContent = result.value;

复制代码

创建新窗口预览 word 文档

• 使用 window.open 方法创建一个新的浏览器窗口。
  
• 在新窗口中写入转换后的 HTML 内容，并添加一些基本的样式以改善预览结果。
  

1. const newWindow = window.open('', '_blank');
2. newWindow.document.write(`
3.   <!DOCTYPE html>
4.   <html>
5.   <head>
6.     <title>Word 文档预览</title>
7.     <meta charset="UTF-8">
8.     <style>
9.       body {
10.         font-family: Arial, sans-serif;
11.         margin: 20px;
12.       }
13.     </style>
14.   </head>
15.   <body>
16.     ${htmlContent}
17.   </body>
18.   </html>
19. `);
20. newWindow.document.close();

复制代码

  缺点：使用 mammoth 将 Word 文档转换为 HTML 时，会丢失 Word 文档中的样式，导致渲染的页面与原 word 文档差别很大。
  转换后的 HTML 与原 Word 文档对比如下

办理办法: 使用 docx-preview 预览 Word 文档
使用 docx-preview 预览 Word 文档

先容

docx-preview 是一个用于在浏览器中预览 Word 文档（.docx）的 JavaScript 库。它提供了简朴易用的 API 来渲染 Word 文档。
安装

1. npm install docx-preview
2. # 或者
3. yarn add docx-preview

复制代码

重要方法

1. renderAsync
参数：

• document：Word 文档的二进制数据，可以是 Blob、ArrayBuffer 或 string 范例。
  
• bodyContainer：DOM 元素，用于放置渲染后的文档内容。
  
• styleContainer： DOM 元素，用于渲染文档的样式、编号、字体等。假如设置为 null，则使用 bodyContainer。
  
• options：一个对象，包含以下可选属性：
  
  
  
  • className: string (默认值: "docx")，用于生成默认和文档样式的类名前缀。
    
  • inWrapper: boolean (默认值: true)，是否启用围绕文档内容的包装器，假如启用，文档内容将被包裹在一个额外的容器中。
    
  • ignoreWidth: boolean (默认值: false)，是否禁用页面宽度的渲染，假如启用，页面宽度将不会被应用到渲染的 HTML 中。
    
  • ignoreHeight: boolean (默认值: false)，是否禁用页面高度的渲染，假如启用，页面高度将不会被应用到渲染的 HTML 中。
    
  • ignoreFonts: boolean (默认值: false)，是否禁用字体的渲染，假如启用，文档中的自界说字体将不会被加载和应用。
    
  • breakPages: boolean (默认值: true)，是否在页面中断处举行分页，假如启用，页面中断（如分页符）将被正确处理。
    
  • ignoreLastRenderedPageBreak: boolean (默认值: true)，是否禁用最后一个渲染的页面中断，假如启用，最后一个页面中断将不会被处理。
    
  • experimental: boolean (默认值: false)，是否启用实行性功能（如制表位计算），启用后，可以使用一些尚未完全稳固的高级功能。
    
  • trimXmlDeclaration: boolean (默认值: true)，是否在解析 XML 文档之前移除 XML 声明，假如启用，XML 声明将被移除，以避免解析问题。
    
  • useBase64URL: boolean (默认值: false)，是否将图像、字体等资源转换为 Base64 URL，假如启用，资源将被嵌入到 HTML 中，而不是使用 URL.createObjectURL。
    
  • renderChanges: boolean (默认值: false)，是否启用实行性的文档更改渲染（如插入和删除），启用后，文档中的更改标志将被渲染。
    
  • renderHeaders: boolean (默认值: true)，是否启用页眉的渲染，假如启用，文档中的页眉将被正确渲染。
    
  • renderFooters: boolean (默认值: true)，是否启用页脚的渲染，假如启用，文档中的页脚将被正确渲染。
    
  • renderFootnotes: boolean (默认值: true)，是否启用脚注的渲染，假如启用，文档中的脚注将被正确渲染。
    
  • renderEndnotes: boolean (默认值: true)，是否启用尾注的渲染，假如启用，文档中的尾注将被正确渲染。
    
  • renderComments: boolean (默认值: false)，是否启用实行性的批评渲染，启用后，文档中的批评将被渲染。
    
  • debug: boolean (默认值: false)，是否启用额外的调试日志，启用后，将在控制台输出更多的调试信息，有助于问题排查。
    
  
  

示例

1. import { renderAsync } from 'your-render-library';
3. const documentBlob = /* 获取 Word 文档的 Blob 数据 */;
4. const bodyContainer = document.getElementById('body-container');
5. const styleContainer = document.getElementById('style-container');
7. const options = {
8.     className: 'docx',
9.     inWrapper: true,
10.     ignoreWidth: false,
11.     ignoreHeight: false,
12.     ignoreFonts: false,
13.     breakPages: true,
14.     ignoreLastRenderedPageBreak: true,
15.     experimental: false,
16.     trimXmlDeclaration: true,
17.     useBase64URL: false,
18.     renderChanges: false,
19.     renderHeaders: true,
20.     renderFooters: true,
21.     renderFootnotes: true,
22.     renderEndnotes: true,
23.     renderComments: false,
24.     debug: false
25. };
27. renderAsync(documentBlob, bodyContainer, styleContainer, options)
28.     .then((wordDocument) => {
29.         console.log('Document rendered successfully:', wordDocument);
30.     })
31.     .catch((error) => {
32.         console.error('Error rendering document:', error);
33.     });

复制代码

预览 Word 文档示例代码

1. <template>
2.   <div class="table">
3.     <el-table :data="tableData" header-align="center" border style="width: 100%">
4.       <el-table-column align="center" type="index" width="60" label="序号">
5.       </el-table-column>
6.       <el-table-column align="center" prop="fileName" label="文件名" />
7.       <el-table-column align="center" prop="upTime" label="上传日期" width="200" />
8.       <el-table-column align="center" fixed="right" label="操作" width="120">
9.         <template slot-scope="scope">
10.           <el-button @click="previewDocx(scope.row)" type="text">预览</el-button>
11.         </template>
12.       </el-table-column>
13.     </el-table>
15.     <el-dialog width="68%" :visible.sync="isShow" :before-close="close" class="doxc_dialog" :show-close="false"
16.     :close-on-press-escape="true">
17.       <div class="doxc_con" ref="doxc_con"></div>
18.     </el-dialog>
19.   </div>
20. </template>
22. <script>
23. import { previewFile } from "@/api/file";
24. import { timeStampToString } from "@/utils/utils";
25. import { getFilesList } from "@/api/file";
26. import { renderAsync } from 'docx-preview';
27. export default {
28.   name: "fileTable",
29.   data() {
30.     return {
31.       pageSizes: [10, 20, 50, 100],
32.       form: {
33.         pageSize: 10,
34.         pageNum: 1,
35.       },
36.       total: 0,
37.       tableData: [],
38.       isShow: false,
39.     }
40.   },
41.   created() {
42.     this.getFileName();
43.   },
44.   methods: {
45.     // 获取文件列表
46.     async getFileName() {
47.       const { code, data: resData } = await getFilesList(this.form);
48.       console.log('code, data::: ', code, resData);
49.       if (code === 200) {
50.         resData.forEach(item => {
51.           item.upTime = timeStampToString(item.upTime);
52.         });
53.         this.tableData = resData;
54.       }
55.     },
56.     // 预览 DOCX 文件
57.     async previewDocx({ fileName }) {
58.       try {
59.         const response = await previewFile(fileName);
60.         console.log('response::: ', response);
62.         let blob = new Blob([response], { type: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document' });
64.         this.isShow = true;
66.         // 使用 dialog 组件,需要弹窗完成后再渲染内容
67.         this.$nextTick(async () => {
68.           // 渲染预览
69.           await renderAsync(
70.             response,
71.             this.$refs.doxc_con,
72.           );
73.         });
75.       } catch (err) {
76.         console.error('Failed to preview file', err);
77.       }
78.     },
79.     close() {
80.       this.isShow = false;
81.     },
83.   }
84. }
85. </script>
87. <style lang="scss" scoped>
88. .table {
89.   width: 600px;
90. }
92. .pagination {
93.   float: right;
94.   margin-top: 20px;
95. }
97. ::v-deep .doxc_dialog .el-dialog__body {
98.   padding: 0 !important;
99. }
101. ::v-deep .doxc_dialog .el-dialog {
102.   margin-top: 5vh !important;
103.   width: 595.3pt !important;
104. }
106. ::v-deep .doxc_dialog .el-dialog__header {
107.   display: none;
108. }
110. ::v-deep .doxc_dialog .docx-wrapper {
111.   padding: 0 !important;
112. }
113. </style>

复制代码

实现结果

总结

本文先容了如安在 Web 应用中实现 Word 文档的预览功能。后端使用 Express 框架提供文件列表和文件内容的 API 接口，前端使用 Vue.js 和 Element UI 组件库展示文件列表并实现预览功能。通过 mammoth 和 docx-preview 库将 Word 文档转换为 HTML 并在新窗口或对话框中展示，确保了良好的用户体验和较高的预览质量。

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。