乐趣区

关于word:vue中使用docxpreview插件预览word文档后端express

jiezi

问题形容

本文记录了一下预览 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 代码中，间接复制粘贴运行即可

总结

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

退出移动版