下载docx文件，在线预览docx doc-preview

1.点击预览按钮，路由携带url传参跳转到预览页面，同时对url值进行加密处理
encodeURIComponent（url）[代码中我用的使base64插件，两者都可]

2.created函数中，window.location.href获取当前浏览器地址，截取到加密的url值，然后进行解密decodeURIComponent（url）。

注意：可能会遇到加密编码为=，系统会自动转换为%3D，这样的话就无法解密成功，这里一定要做一下处理

3.定义一个div，设置id名，预览解析后的docx,

4.安装docx-preview插件。npm i docx-preview --save

只能在线预览后缀名是docx后缀的文件，doc不可以

5.将接收到的url发送网络请求，url格式是：http://xxx.xx.x.xxx:xxxx/文档名称.docx

6.成功后将res.data进行传入，加载、渲染，如果有下载需求的，也可以进行下载

最终代码如下：

router.js

import Router from "vue-router";
import Vue from "vue";
import preview from "../pages/preview.vue";
import home from "../pages/home.vue";
export const constantRouterMap = [
  {
    path: "/preview",
    name: "preview",
    component: preview,
  },
  {
    path: "/home",
    name: "home",
    component: home,
  },
  {
    path: "*",
    redirect: "/home",
  },
];

/**
 * 配置路由
 **/
const router = new Router({
  mode: "history",
  routes: [...constantRouterMap],
});
export default router;

home.vue

<template>
  <div class="docx-preview-wrap">
    <button @click="preview()">预览</button>
  </div>
</template>

<script>
export default {
  name: "DocxPreview",
  data() {
    return {
    };
  },
  created() {},
  methods: {
    preview() {
      let enUrl = this.$Base64.encode('http://172.16.1.15:8025/demo/hey.docx');
      this.$router.push("/preview" + "?url=" + enUrl);
    },
  },
};
</script>

preview.vue

<template>
  <div>
    <div id="bodyContainer"></div>
  </div>
</template>

<script>
import { renderAsync } from "docx-preview";
import { downloadFile } from "../config/config";

export default {
  data() {
    return {
      docxOptions: {
        className: "kaimo-docx-666", // string：默认和文档样式类的类名/前缀
        inWrapper: true, // boolean：启用围绕文档内容的包装器渲染
        ignoreWidth: false, // boolean：禁用页面的渲染宽度
        ignoreHeight: false, // boolean：禁止渲染页面高度
        ignoreFonts: false, // boolean：禁用字体渲染
        breakPages: true, // boolean：在分页符上启用分页
        ignoreLastRenderedPageBreak: true, // boolean：在 lastRenderedPageBreak 元素上禁用分页
        experimental: false, // boolean：启用实验功能（制表符停止计算）
        trimXmlDeclaration: true, // boolean：如果为true，解析前会从​​ xml 文档中移除 xml 声明
        useBase64URL: false, // boolean：如果为true，图片、字体等会转为base 64 URL，否则使用URL.createObjectURL
        useMathMLPolyfill: false, // boolean：包括用于 chrome、edge 等的 MathML polyfill。
        showChanges: false, // boolean：启用文档更改的实验性渲染（插入/删除）
        debug: false, // boolean：启用额外的日志记录
      },
      file: "",
    };
  },
  created() {
    // 接收过来,解密
    var a = window.location.href;
    var urlList = a.split("=");
    a = urlList[urlList.length - 1].split("%3D")[0];
    a = a + "=";
    console.log(a);

    var url = this.$Base64.decode(a);
    console.log(url);
    this.getFileInfo(url);
  },
  mounted() {},
  methods: {
    async getFileInfo(docxurl) {
      // 发送网络请求
      await downloadFile(docxurl)
        .then((res) => {
          console.log(res);
          this.file = res.data;
          //下载文件
          this.download();
          this.handlePreview();
        })
        .catch((err) => {
          console.log(err);
        });
    },
    handlePreview() {
      // 将file转为buffer
      let fr = new FileReader();

      fr.readAsArrayBuffer(this.file);
      fr.addEventListener(
        "loadend",
        (e) => {
          //   console.log("loadend---->", e);
          let buffer = e.target.result;
          this.docxRender(buffer);
        },
        false
      );
    },
    // 渲染docx
    docxRender(buffer) {
      let bodyContainer = document.getElementById("bodyContainer");
      renderAsync(
        buffer, // Blob | ArrayBuffer | Uint8Array, 可以是 JSZip.loadAsync 支持的任何类型
        bodyContainer // HTMLElement 渲染文档内容的元素,
        // null, // HTMLElement, 用于呈现文档样式、数字、字体的元素。如果为 null，则将使用 bodyContainer。
        // this.docxOptions // 配置
      ).then((res) => {
        // this.centerDialogVisible = false;
        // console.log("res---->", res);
      });
    },

    download() {
      var a = document.createElement("a");
      a.href = URL.createObjectURL(this.file);
      // a.download = "123.docx";
      a.style.display = "none";
      document.body.appendChild(a);
      a.click();
      // a.remove();
    },
  },
};
</script>

<style scoped></style>

----------------------------------------end