vue docx-preview 打开新窗口预览docx文件

目前项目中需要打开新窗口预览后台返回的文件，暂定使用docx-preview插件进行预览

官网链接：https://www.npmjs.com/package/docx-preview

npm i docx-preview

import { renderAsync } from 'docx-preview' //引入

 实现流程：

  1.接收后端返回的文件流

  2.在打开的新窗口上新建一个div

  3.将接收到的数据渲染到新建的div上

 代码：

exportData(item) {
      return exportData(item.id)
        .then((res) => {
          let docx = require('docx-preview')
          let docwindow = window.open('', '_blank')
          let box = document.createElement('div') // 创建一个div
          docx.renderAsync(res, box).then(() => {
            // 渲染文件
            docwindow.document.write(box.outerHTML)
            docwindow.document.title = '请假表' // 窗口标题
          })
        })
        .catch((error) => {
          console.error(error)
        })
    },

 

注：上述文件代码还有个问题，当后台返回的文件流中包含图片时，图片无法正常加载。

查找原因才发现，document.write()主要用于向HTML文档中写入文本内容，它接受一个字符串参数并将其解析为HTML代码插入到文档中。然而，document.write()不支持直接写入图片元素（如<img>标签）。

上述代码替换：

 // docwindow.document.write(box.outerHTML) 
docwindow.document.body.appendChild(box)

成功解决！