在现代Web开发中，前端与后端的合作十分重要，尤其是在处理文件格式转换时。本文将介绍如何在前端使用 docx-preview 展示 .docx 文件，以及在后端将 .doc 格式转化为 .docx 格式的方法。
一、前端使用 docx-preview 展示 .docx 文件
docx-preview 是一个非常强大的库，它允许我们在网页上直接预览 .docx 文件。下面是如何在前端使用这个库的步骤：
- 引入
docx-preview库：
首先，我们需要在项目中引入 docx-preview 库。可以通过 npm 安装，也可以直接在 HTML 文件中引入。
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DOCX预览</title>
<script src="https://cdn.jsdelivr.net/npm/docx-preview"></script>
</head>
<body>
<input type="file" id="fileInput" accept=".docx" />
<div id="preview"></div>
<script>
document.getElementById('fileInput').addEventListener('change', function(event) {
const file = event.target.files[0];
const reader = new FileReader();
reader.onload = function(e) {
const arrayBuffer = e.target.result;
docx.render(arrayBuffer, document.getElementById('preview'));
};
reader.readAsArrayBuffer(file);
});
</script>
</body>
</html>
在上述代码中，我们创建了一个文件输入框，用户可以选择一个 .docx 文件。当文件被加载后，我们使用 FileReader 将文件读取为 ArrayBuffer，然后调用 docx.render 方法在指定的 div 中展示文件内容。
二、后端将 .doc 转换为 .docx
在后端，我们可以使用 Python 的 python-docx 库来实现 .doc 到 .docx 的转换。首先，需要安装必要的库：
pip install python-docx pypiwin32
然后，可以使用如下代码进行转换：
import os
from win32com import client
def convert_doc_to_docx(doc_path, docx_path):
# 创建一个 Word 应用对象
word = client.Dispatch('Word.Application')
# 将文件从 .doc 转换为 .docx
doc = word.Documents.Open(doc_path)
doc.SaveAs(docx_path, FileFormat=16) # 16 为 docx 格式
doc.Close()
word.Quit()
if __name__ == "__main__":
doc_file = r"C:\path\to\your\file.doc" # 输入 .doc 文件路径
docx_file = r"C:\path\to\your\file.docx" # 输出 .docx 文件路径
convert_doc_to_docx(doc_file, docx_file)
在上述代码中，我们使用 win32com.client 模块来与 Microsoft Word 应用进行交互。首先打开 .doc 文件，然后将其保存为 .docx 格式，最后关闭文档和 Word 应用。
三、整合前后端代码
在实际应用中，我们往往需要将前后端结合起来。前端可以选择一个 .doc 文件发送至后端，后端完成转化后，将生成的 .docx 返回给前端展示。以下是一个简单的示例：
// 前端
document.getElementById('fileInput').addEventListener('change', function(event) {
const file = event.target.files[0];
const formData = new FormData();
formData.append('file', file);
fetch('/convert', {
method: 'POST',
body: formData,
})
.then(response => response.blob())
.then(blob => {
const url = URL.createObjectURL(blob);
const previewDiv = document.getElementById('preview');
previewDiv.innerHTML = ''; // 清空预览区
docx.render(blob, previewDiv); // 使用 docx-preview 显示转换后的文件
});
});
# Flask 后端示例
from flask import Flask, request, send_file
import os
app = Flask(__name__)
@app.route('/convert', methods=['POST'])
def convert():
if 'file' not in request.files:
return "No file part", 400
file = request.files['file']
if file.filename == '':
return "No selected file", 400
file_path = os.path.join('uploads', file.filename)
file.save(file_path)
# 转换文件
docx_path = os.path.splitext(file_path)[0] + '.docx'
convert_doc_to_docx(file_path, docx_path)
return send_file(docx_path, as_attachment=True)
if __name__ == '__main__':
app.run()
通过集成上述代码，我们可以实现前端展示 .docx 文件，同时后端将 .doc 文件转换为 .docx 的功能。这种结合利用了双方的优势，提高了应用的灵活性和用户体验。
