vue中使用docx-preview插件预览word文档（后端express）

问题描述

本文记录了一下预览word文档的功能。需要用到：

前端：vue
后端：express
插件：docx-preview

思路分析

1. 后端express代码中读取文件夹中的 .docx 类型文件
2. 然后将其以可读流的方式返回给前端一个blob流文件
3. 后端返回的流文件前端收到以后，执行docx-preview插件的renderAsync方法即可渲染出预览的效果

我们先看一下效果图

代码

后端express代码

// 引入文件模块 
const fs = require("fs")// 返回word文件接口
route.get('/getDoc', (req, res) => {// 假设我们的word文档文件就存放在这个doc目录里面let docxUrl = './doc/出师表.docx'// 允许跨域res.header("Access-Control-Allow-Origin", "*");// 设置请求头res.writeHead(200, {// 指定文件类型为docx'Content-Type': 'application/vnd.openxmlformats-officedocument.wordprocessingml.document',})//创建可读流let readStream = fs.createReadStream(docxUrl)// 将读取的结果以管道pipe流的方式返回给前端readStream.pipe(res);})

前端vue代码

注意，vue项目要先下载插件哦cnpm i docx-preview --save

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！