当前位置：卡卷网 / 每日看点 / 正文

怎样使用js解析word文档使它按原word文档的格式显示在网页上？

作者：卡卷网发布时间：2025-01-19 19:16浏览数量：148次评论数量：0次

那天听到隔壁组的技术领导在怒斥刚来的前端小白

我让你显示个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 结构，包括一个文件输入框和一个用于显示预览的容器。

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>

END

免责声明：本文由卡卷网编辑并发布，但不代表本站的观点和立场，只提供分享给大家。

评论打赏