Vue实现word导入
Vue 实现 Word 导入的方法
使用 docx-parser 库解析 Word 文件
安装 docx-parser 库：
npm install docx-parser在 Vue 组件中引入并使用：
import { parse } from 'docx-parser';
methods: {
async handleFileUpload(event) {
const file = event.target.files[0];
const content = await parse(file);
console.log(content);
}
}使用 mammoth.js 转换 Word 为 HTML
安装 mammoth.js：
npm install mammoth在 Vue 组件中使用：
import mammoth from 'mammoth';
methods: {
async handleFileUpload(event) {
const file = event.target.files[0];
const reader = new FileReader();
reader.onload = async (e) => {
const arrayBuffer = e.target.result;
const result = await mammoth.extractRawText({arrayBuffer});
console.log(result.value);
};
reader.readAsArrayBuffer(file);
}
}使用 FileReader API 读取文件内容
通过 FileReader 直接读取文件内容：
methods: {
handleFileUpload(event) {
const file = event.target.files[0];
const reader = new FileReader();
reader.onload = (e) => {
const content = e.target.result;
console.log(content);
};
reader.readAsText(file);
}
}使用第三方组件 vue-docx
安装 vue-docx：
npm install vue-docx在 Vue 组件中使用：
import VueDocx from 'vue-docx';
export default {
components: {
VueDocx
},
methods: {
onUpload(file) {
console.log(file);
}
}
}后端解析方案
如果文件较大或需要复杂处理，可以发送到后端解析：
methods: {
async uploadFile(file) {
const formData = new FormData();
formData.append('file', file);
const response = await axios.post('/api/parse-word', formData);
console.log(response.data);
}
}注意事项
- 不同库对 Word 文件格式的支持程度不同，需根据实际需求选择
- 大文件处理时建议分片上传或使用后端解析
- 注意浏览器兼容性，部分 API 可能需要 polyfill
- 生产环境建议添加文件类型和大小校验
