问题描述
本文记录了一下预览word文档的功能。需要用到：
- 前端：
vue - 后端：
express - 插件：
docx-preview
思路分析
- 后端express代码中读取文件夹中的
.docx类型文件 - 然后将其以可读流的方式返回给前端一个
blob流文件 - 后端返回的流文件前端收到以后，执行
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
<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>
// 引入axios用来发请求
import axios from "axios";
// 引入docx-preview插件
let docx = require("docx-preview");
export default {
mounted() {
console.log("使用插件的renderAsync方法来渲染", docx); //
},
methods: {
// 预览
goPreview() {
axios({
method: "get",
responseType: "blob", // 因为是流文件，所以要指定blob类型
url: "http://ashuai.work:10000/getDoc", // 自己的服务器，提供的一个word下载文件接口
}).then(({ data }) => {
console.log(data); // 后端返回的是流文件
docx.renderAsync(data, this.$refs.file); // 渲染到页面
});
},
// 下载
downLoad() {
axios({
method: "get",
responseType: "blob", // 因为是流文件，所以要指定blob类型
url: "http://ashuai.work:10000/getDoc", // 自己的服务器，提供的一个word下载文件接口
}).then(({ data }) => {
console.log(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>为了方便大家调试效果，所以后端接口我也提供了一份，大家如果不想写node接口直接用我的即可，接口在上述vue代码中，直接复制粘贴运行即可
总结
好记性不如烂笔头，如果帮到了您，欢迎动动您的小手点个赞呗 ^_^
pdf的预览最方便的做法就是使用浏览器自带的预览pdf功能，因为浏览器自带的预览功能，非常强大，并非一些pdfjs插件能比拟的。所以直接：
window.open("http://ashuai.work:10000/getPdf"); 此接口是笔者服务器提供的pdf接口
