问题形容

本文记录了一下预览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

<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代码中，间接复制粘贴运行即可

总结

好忘性不如烂笔头，如果帮到了您，欢送动动您的小手点个赞呗 ^_^