怎样使用js解析word文档使它按原word文档的格式显示在网页上？
那天听到隔壁组的技术领导在怒斥刚来的前端小白
我让你显示个docx的文件而已，你搞这么久还没搞出来？
你是怎么被招进来的？
前端小白默默地啥也没说。
听到这对话，我默默地打开了我的搜索引擎，写一篇文章记录下怎么使用 docx-preview 插件在前端页面展示 DOCX 文件
1. 引入必要的库
首先，需要引入 jszip.min.js 和 docx-preview.min.js。这些库可以通过 CDN 或本地文件引入。
<script src="https://cdn.bootcdn.net/ajax/libs/jszip/3.10.0/jszip.min.js"></script>
<script src="https://volodymyrbaydalka.github.io/docxjs/dist/docx-preview.min.js"></script>
2. HTML 结构
创建一个简单的 HTML 结构，包括一个文件输入框和一个用于显示预览的容器。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>DOCX 文件预览</title>
</head>
<body>
<div id="app">
<input type="file" @change="upload">
<div ref="file"></div>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/jszip/3.10.0/jszip.min.js"></script>
<script src="https://volodymyrbaydalka.github.io/docxjs/dist/docx-preview.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el: '#app',
data: {
file: null
},
methods: {
// 通过 input 预加载展示文档
upload(e) {
this.file = e.target.files[0];
docx.renderAsync(this.file, this.$refs.file);
}
}
});
</script>
</body>
</html>
3. Vue.js 示例
如果你使用 Vue.js，可以更方便地管理文件上传和预览。以下是一个完整的 Vue.js 示例[^39^]：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>DOCX 文件预览</title>
</head>
<body>
<div id="app">
<input type="file" @change="upload">
<div ref="file"></div>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/jszip/3.10.0/jszip.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://volodymyrbaydalka.github.io/docxjs/dist/docx-preview.min.js"></script>
<script>
var app = new Vue({
el: '#app',
data: {
file: null
},
methods: {
// 通过 input 预加载展示文档
upload(e) {
this.file = e.target.files[0];
docx.renderAsync(this.file, this.$refs.file);
},
// 直接请求本地文档
getApi(path) {
let _that = this;
let xhr = new XMLHttpRequest();
xhr.open('GET', path, true);
xhr.responseType = 'blob';
xhr.onload = function (e) {
if (this.status == 200) {
let blob = new Blob([this.response], { type: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document' });
docx.renderAsync(blob, _that.$refs.file);
}
};
xhr.send();
}
},
mounted() {
this.getApi("./example.docx"); // 本地文档地址
}
});
</script>
</body>
</html>
4. 样式调整
docx-preview 会自动生成一些样式，你可以根据需要进行调整。例如，去除背景灰边和阴影效果[^40^]：
<style>
.docx-wrapper {
background-color: #fff;
padding: 0;
}
.docx-wrapper > section.docx {
width: 100% !important;
padding: 0rem !important;
min-height: auto !important;
box-shadow: none;
margin-bottom: 0;
}
</style>
5. 使用 fetch 请求
如果你需要从服务器获取 DOCX 文件，可以使用 fetch API[^40^]：
function previewfile(item) {
if (item.fileType == '.docx') {
nextTick(() => {
fetch(item.filePath)
.then((response) => {
let docData = response.blob();
let childRef = document.getElementsByClassName('childRef');
renderAsync(docData, childRef[0]).then((res) => {
console.log('res---->', res);
});
})
.catch((error) => {
console.log(error);
});
});
} else {
ImageUrl.value = toRaw(item).filePath;
}
}
6. 完整的 Vue.js 示例
以下是一个完整的 Vue.js 示例，展示了如何从服务器获取 DOCX 文件并进行预览[^43^]：
<template>
<div>
<el-button @click="goPreview">点击预览 word 文件</el-button>
<el-button @click="downLoad">点击下载 word 文件</el-button>
<div class="docWrap">
<div ref="file"></div>
</div>
</div>
</template>
<script>
import axios from "axios";
import { renderAsync } from 'docx-preview';
export default {
methods: {
// 预览
goPreview() {
axios({
method: "get",
responseType: "blob", // 因为是流文件，所以要指定 blob 类型
url: "http://ashuai.work:10000/getDoc", // 自己的服务器，提供的一个 word 下载文件接口
}).then(({ data }) => {
renderAsync(data, this.$refs.file); // 渲染到页面
});
},
// 下载
downLoad() {
axios({
method: "get",
responseType: "blob", // 因为是流文件，所以要指定 blob 类型
url: "http://ashuai.work:10000/getDoc", // 自己的服务器，提供的一个 word 下载文件接口
}).then(({ data }) => {
const blob = new Blob([data]); // 把得到的结果用流对象转一下
var a = document.createElement("a"); // 创建一个 <a></a> 标签
a.href = URL.createObjectURL(blob); // 将流文件写入 a 标签的 href 属性值
a.download = "出师表.docx"; // 设置文件名
a.style.display = "none"; // 隐藏 a 标签
document.body.appendChild(a); // 将 a 标签追加到文档对象中
a.click(); // 模拟点击 a 标签，会触发 a 标签的 href 的读取，浏览器就会自动下载了
a.remove(); // 一次性的，用完就删除 a 标签
});
},
},
};
</script>
<style lang="less" scoped>
.docWrap {
width: 900px;
overflow-x: auto;
}
</style>
