目前项目中需要打开新窗口预览后台返回的文件,暂定使用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)
成功解决!