Vue + spring boot环境下实现docx文件预览功能

先看效果：

安装依赖 

npm i docx-preview -S

可能会出现版本冲突的问题 关于less、lessloader

卸载

npm uninstall less less-loader

安装

npm install --save [email protected] less-loader@5

 目前没遇见其他问题，接着在目标页面引入docx-preview

import { defaultOptions, renderAsync } from "docx-preview";

 配置

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，解析前会从​​ xmlTemplate 文档中移除 xmlTemplate 声明
        useBase64URL: false, // boolean：如果为true，图片、字体等会转为base 64 URL，否则使用URL.createObjectURL
        useMathMLPolyfill: false, // boolean：包括用于 chrome、edge 等的 MathML polyfill。
        showChanges: false, // boolean：启用文档更改的实验性渲染（插入/删除）
        debug: false, // boolean：启用额外的日志记录
      },

在Vue的data中定义 

 Vue的methods中加入自定义方法

//我是在组件el-table里面绑定该方法 根据需求你们随意
async handlePreview(row) {
        //请求后台的api
      await raku0002_viewFile().then(res => {
        //新窗口标题 我这里是页面el-table传过来的 改成你们自己的
        let fileName = row.fileName
        //用于解码 使用 base-64 编码的字符串
        let bstr = window.atob(res.data.wordData);
        let n = bstr.length;
        let u8arr = new Uint8Array(n);
        while (n--) {
          u8arr[n] = bstr.charCodeAt(n);
        }
        console.log(u8arr.buffer);
        //u8arr.buffer 转成arrayBuffer类型
        this.docxRender(u8arr.buffer,fileName);
      })
    },

    // 渲染docx
    docxRender(buffer,fileName) {
        let docwindow = window.open(""); // 创建新窗口
        let box = document.createElement('div')  // 创建一个div
        let docx = require("docx-preview")
        docx.renderAsync(buffer,box).then(() => {  // 渲染文件
        docwindow.document.write(box.outerHTML); 
        //渲染文件后将div添加到新窗口中，div不能提前添加，否则新窗口中不能渲染出文件
        //注意这里不能直接用box
        docwindow.document.title = fileName // 窗口标题
        docwindow.document.getElementsByClassName('docx')[0].style.width = 'auto'
        // 如果文件显示正常，不用设置宽度，我的出现了下图所示只显示了一半
    },
})

前台完事了 看后台

//不要直接复制 改成自己的
    @RequestMapping("/viewFile")
    public AppResult viewFile(Raku0002Form raku0002Form)
        throws IOException{
        //我这里文件是放在本地 有其他需求自行调整
        File file = new File("E:\\files\\first.docx");
        FileInputStream in = new FileInputStream(file);
        byte[] bytes=new byte[(int)file.length()];
        in.read(bytes);
        //关键在这一步转成base64字符串
        //尝试过blob String类型都不好使 
        String base64 = Base64.getEncoder().encodeToString(bytes);
        raku0002Form.setWordData(base64);
        return AppResultBuilder.success(raku0002Form, ResultCode.SUCCESS);
    }

成功实现得益于借鉴了几位博主的帖子 取其精华 感谢 哦耶~

vue中使用window.open()打开新窗口预览docx文件_vue window打开新页面_记录...的博客-CSDN博客

vue里使用docx-preview预览docx文件_凯小默的博客-CSDN博客