word文档预览

使用docx-preview库

下载docx-preview；npm install docx-preview

引入 renderAsync

写个div承载渲染的文档 <div id="container" ></div>

使用renderAsync，将blob数据渲染到这个div里

//这个是我的接口，将数据转换成blob格式
export function getDownLoad(data){
  return request({
    url:'/system/programme/download',
    method:'post',
    data,
    responseType:"blob"
  })
}

<template>
     <el-dialog :visible.sync="dialogVisible" width="50%" append-to-body>
      <div class="docWrap">
        <div id="container" ></div>
      </div>
    </el-dialog>
</template>
<script>
    import { getDownLoad } from "@/api/system/programme";
    import { renderAsync } from "docx-preview";
    export default {
      data(){
        dialogVisible:false,
        id:12
      },
      mounted(){
        this.dialogVisible = true
        getDownLoad({id:this.id}).then(res => {
          renderAsync(res, document.getElementById("container"), null, {
            className: "docx", // 默认和文档样式类的类名/前缀
            inWrapper: true, // 启用围绕文档内容渲染包装器
            ignoreWidth:  false, // 禁止页面渲染宽度
            ignoreHeight:  false, // 禁止页面渲染高度
            ignoreFonts:  false, // 禁止字体渲染
            breakPages:  true, // 在分页符上启用分页
            ignoreLastRenderedPageBreak:  true,//禁用lastRenderedPageBreak元素的分页
            experimental: false, //启用实验性功能（制表符停止计算）
            trimXmlDeclaration:  true, //如果为真，xml声明将在解析之前从xml文档中删除
            debug:  false, // 启用额外的日志记录
          })
        })
      }
      //getDownLoad 是我自己的接口，根据实际需求来，res是后端返回的word文件流
    }
</script>
<style>
    .docWrap {
       width: 900px;
       overflow-x: auto;
     }
</style>

效果图