本文记录一下打开新窗口预览word文档的功能，需要用到docx-preview插件实现docx文件预览

使用 npm i docx-preview -s 安装插件

思路：

• 先从后端获取到文件流

• 使用window.open()打开一个新窗口，在新窗口中创建一个div用来存放docx文件

• 使用docx-preview插件的renderAsync方法进行渲染出预览的效果

代码如下

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

window.open() 中 'DetailRunTime' 和 '_blank' 的区别

https://blog.csdn.net/qq_44091061/article/details/122558832