首页 前端知识 vue docx-preview 打开新窗口预览docx文件

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

2024-06-19 08:06:40 前端知识 前端哥 948 953 我要收藏

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

成功解决!

转载请注明出处或者链接地址:https://www.qianduange.cn//article/12805.html
标签
评论
发布的文章

Markdown基础与进阶语法

2024-06-30 22:06:12

零基础 HTML 入门(详细)

2024-06-30 22:06:09

CSS3基本语法

2024-06-30 22:06:51

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!