
vue中使用docx-preview插件预览word文档
vue
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
项目地址:https://gitcode.com/gh_mirrors/vu/vue

·
问题描述
本文记录了一下预览word文档的功能。需要用到:
前端:vue
后端:springboot
插件:docx-preview
思路分析
后端express代码中读取文件夹中的 .docx 类型文件
然后将其以可读流的方式返回给前端一个blob流文件
后端返回的流文件前端收到以后,执行docx-preview插件的renderAsync方法即可渲染出预览的效果
我们先看一下效果图
代码
后端java代码
/**
* @param path 想要下载的文件的路径
* @param response
* @功能描述 下载文件:
*/
@RequestMapping("/download")
public void download(String path, HttpServletResponse response) {
try {
// path是指想要下载的文件的路径
File file = new File(path);
log.info(file.getPath());
// 获取文件名
String filename = file.getName();
// 获取文件后缀名
String ext = filename.substring(filename.lastIndexOf(".") + 1).toLowerCase();
log.info("文件后缀名:" + ext);
// 将文件写入输入流
FileInputStream fileInputStream = new FileInputStream(file);
InputStream fis = new BufferedInputStream(fileInputStream);
byte[] buffer = new byte[fis.available()];
fis.read(buffer);
fis.close();
// 清空response
response.reset();
// 设置response的Header
response.setCharacterEncoding("UTF-8");
//Content-Disposition的作用:告知浏览器以何种方式显示响应返回的文件,用浏览器打开还是以附件的形式下载到本地保存
//attachment表示以附件方式下载 inline表示在线打开 "Content-Disposition: inline; filename=文件名.mp3"
// filename表示文件的默认名称,因为网络传输只支持URL编码的相关支付,因此需要将文件名URL编码后进行传输,前端收到后需要反编码才能获取到真正的名称
response.addHeader("Content-Disposition", "attachment;filename=" + URLEncoder.encode(filename, "UTF-8"));
// 告知浏览器文件的大小
response.addHeader("Content-Length", "" + file.length());
OutputStream outputStream = new BufferedOutputStream(response.getOutputStream());
response.setContentType("application/octet-stream");
outputStream.write(buffer);
outputStream.flush();
} catch (IOException ex) {
ex.printStackTrace();
}
}
前端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>




vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
最近提交(Master分支:5 个月前 )
9e887079
[skip ci] 4 个月前
73486cb5
* chore: fix link broken
Signed-off-by: snoppy <michaleli@foxmail.com>
* Update packages/template-compiler/README.md [skip ci]
---------
Signed-off-by: snoppy <michaleli@foxmail.com>
Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com> 7 个月前
更多推荐
所有评论(0)